Laravel Tailwind the abstraction is not taking effect when using the @apply directive

Question

I'm using Laravel 8 Jetstream with Tailwind 2.

I got these navigation item classes:

Active:

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

Normal item:

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

So far so good, but when I take those classes to the @apply directive

** 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;
}

** Navigation file in 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>

The elements' classes are not taking effect, I can only see the names of the elements in simple black text, without the classes working.

Here is how my webpack file looks like: ** 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'));

After having executed:

$ npm run dev

The changes do not take effect.

How do I fix this?

question from:https://stackoverflow.com/questions/65650532/laravel-tailwind-the-abstraction-is-not-taking-effect-when-using-the-apply-dire

Answer 1

It's now working after having changed my WebPack file to the following:

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'),
    ]);

After doing this, I executed it again

npm run dev

And on my web browser, I removed the cookies and reloaded the page (F5).

Now the changes on the Tailwind 2 @apply directive do take effect.