文章/答案/技术大牛

发布

社区首页 >问答首页 >除非我使用Tailwind文件(Laravel 9.x/Tailwind 3.x)，否则TailwindCSS样式不能正确应用

问除非我使用Tailwind文件(Laravel 9.x/Tailwind 3.x)，否则TailwindCSS样式不能正确应用
EN

Stack Overflow用户

提问于 2022-03-06 09:39:43

回答 3查看 657关注 0票数 0

我已经安装了一个新版本的Laravel9.x (9.2，准确地说)与Laravel初学者工具包的认证。默认情况下，Laravel附带安装了Tailwin3.x，它在<head>标记中的下面一行中编译。

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

由于某种原因，我的部分视图只有在手动将Tailwind文件添加到app.blade.php文件的头部时才能正确呈现(显然，我不想使用CDN文件，因为Tailwin3.x已经在app.css样式表中编译了)。

<head>
  <link rel="stylesheet" href="{{ asset('css/app.css') }}">
  <!-- Really need to remove this line below -->
  <script src="https://cdn.tailwindcss.com/3.0.23"></script>
</head>

-将CDN链接添加到head标记后的外观(这是它应该看起来的样子，但不使用CDN) --

-如果不将CDN链接添加到头标签中，它的外观如何--

以下是我的刀片文件中的代码(为了简单和可读性，我删除了Laravel逻辑)。

<tr style="display: none;" x-show="selected == {{ $loop->iteration }}">
    <td class="text-center text-xs" colspan="5">
        <div class="flex flex-row">
            <div class="basis-2/12">
                <div>
                    player123 | 9.3
                </div>
            </div>

            <div class="basis-8/12">
                <div class="grid grid-cols-3 gap-4 w-100 md:w-1/2 mx-auto border-b py-2">
                    <div class="text-center text-xs md:text-sm">10</div>
                    <div class="text-center text-xs md:text-sm">Shots on Target</div>
                    <div class="text-center text-xs md:text-sm">10</div>
                </div>                                                                                
            </div>

            <div class="basis-2/12">
                <div>
                    player721 | 9.3
                </div>
            </div>
          </div>
    </td>
</tr>

预期行为

然后显示'row‘，这样它就可以使用表的全部宽度，但不需要使用<script src="https://cdn.tailwindcss.com/3.0.23"></script>标记(如上面的第一个图像所示)。

-实际行为--

数据“行”似乎“浮动”到元素的左侧--谁能解释为什么flex-行不使用表中<td>容器的全部宽度？

我正在运行来自动构建我的app.css，当我查看源代码时，我可以在app.css文件中看到Tailwin3.x的内容。

css

laravel

tailwind-css

tailwind-ui

laravel-9

回答 3

Stack Overflow用户

发布于 2022-04-02 12:52:44

我通过为我的vue组件添加路径来解决这个问题，我将其放在资源中，例如：resource/js/components/companies/CompanyIndex.vue

将此'./resources/js/**/*.vue'添加到tailwind.config.js中的内容列表将解决这个问题。

票数 1

Stack Overflow用户

发布于 2022-03-09 07:58:50

在app.css中，尝试替换：

@tailwind base;
@tailwind components;
@tailwind utilities;

通过以下方式：

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

然后再次运行npm run dev或npm run watch。

票数 0

Stack Overflow用户

发布于 2022-03-10 19:22:12

你的刀片文件在哪里？Laravel的默认tailwind.config.js只在以下路径中查找它需要生成的类。

content: [
    './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
    './storage/framework/views/*.php',
    './resources/views/**/*.blade.php',
],

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71369135

复制

相似问题

问除非我使用Tailwind文件(Laravel 9.x/Tailwind 3.x)，否则TailwindCSS样式不能正确应用
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问除非我使用Tailwind文件(Laravel 9.x/Tailwind 3.x)，否则TailwindCSS样式不能正确应用EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问除非我使用Tailwind文件(Laravel 9.x/Tailwind 3.x)，否则TailwindCSS样式不能正确应用
EN