Laravel Tailwind 抽象在使用 @apply 指令时没有生效

Posted 2023-03-07

【中文标题】Laravel Tailwind 抽象在使用 @apply 指令时没有生效

【英文标题】：Laravel Tailwind the abstraction is not taking effect when using the @apply directive

【发布时间】：2021-04-15 10:22:01

【问题描述】：

我正在使用 Laravel 8 Jetstream 和 Tailwind 2。

我得到了这些导航项类：

主动：

class = "bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium"

普通物品：

class = "text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"

到目前为止一切顺利，但是当我将这些课程带到 @apply 指令时

** app.css **

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

.active
    @apply bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium;


.navitem
    @apply text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium;

** Blade 中的导航文件**

--MENU desktop--
   <div class="hidden sm:block sm:ml-6">
       <div class="flex space-x-4">
        @auth()
          <a href="#" class="navitem">Dashboard</a>
          <a href="#" class="active">Projects</a>
        @endauth
       </div>
   </div>

元素的类没有生效，我只能看到简单的黑色文本中的元素名称，没有类。

这是我的 webpack 文件的样子： ** webpack.mix.js **

const mix = require('laravel-mix');


mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options(
        postCss: [
            require('postcss-import'),
            require('tailwindcss'),
        ]
    )
    .webpackConfig(require('./webpack.config'));

执行后：

$ npm run dev

更改未生效。

我该如何解决这个问题？

【问题讨论】：

您能否添加您的解决方案作为此问题的答案？让人们在未来更容易解决这个问题。

【参考方案1】：

将我的 WebPack 文件更改为以下内容后，它现在可以工作了：

webpack.mix.js

const mix = require('laravel-mix');


mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ]);

做完之后我又执行了一次

npm run dev

在我的网络浏览器上，我删除了 cookie 并重新加载了页面 (F5)。

现在 Tailwind 2 @apply 指令的更改生效。