TailwindCSS 样式无法正确应用，除非我使用 Tailwind CDN 文件 (Laravel 9.x/Tailwind 3.x)

Question

我已经安装了 Laravel 9.x 的新版本（确切地说是 9.2）和 Laravel Breeze 入门工具包用于身份验证。默认情况下 Laravel Breeze 安装了 Tailwind 3.x，它在 <head> HTML 标签内的以下行中编译。

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

出于某种原因，只有当我手动将 Tailwind CSS CDN 文件添加到 app.blade.php 文件中的头部时，我的部分视图才能正确呈现（显然我宁愿不使用作为 Tailwind 3.x 的 CDN 文件已在 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 link 添加到 head 标签后的样子（这是不使用 CDN 时的样子）-- -- 没有将 CDN link 添加到 head 标签时的样子 --

这是我的 blade 文件中的代码（为了简单和可读性，我删除了 Laravel PHP 逻辑）。

<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'，因此它使用 table 的整个宽度，但不使用 <script src="https://cdn.tailwindcss.com/3.0.23"></script> 标签（如上图第一张图所示）。

-- 实际行为--

统计数据 'row' 似乎 'floated' 在元素的左侧 - 谁能解释为什么 flex-row 没有使用 [=19= 的全宽] table?

内的容器

p.s 我正在运行ning npm 运行 watch 自动构建我的 app.css 我可以在 [=49] 中看到 Tailwind 3.x 东西=] 文件，当我查看源代码时。

Answer 1

在 app.css 中，尝试替换：

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

与：

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

和运行npm run dev或npm run watch。

Answer 2

您的 Blade 文件位于何处？ Laravel Breeze 的默认 tailwind.config.js 仅在以下路径中查找它需要生成的类。

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

Answer 3

不敢相信 - 我没有运行 npm run watch 重现 app.css - 显然 tired.com

Answer 4

我通过添加我放置在资源中的 vue 组件的路径来解决这个问题，例如：resource/js/components/companies/CompanyIndex.vue
添加这个 './resources/js/**/*.vue' 到 tailwind.config.js 中的内容列表将解决问题

TailwindCSS 样式无法正确应用，除非我使用 Tailwind CDN 文件 (Laravel 9.x/Tailwind 3.x)

TailwindCSS styles not applying correctly unless I use the Tailwind CDN file (Laravel 9.x/Tailwind 3.x)

css

laravel

tailwind-css

tailwind-ui

laravel-9