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?

Could you add your solution as an answer to this question instead? Makes it easier for people coming to this question in the future. — juliomalves
– juliomalves, Commented Jan 10, 2021 at 12:38

Pathros · Accepted Answer · 2021-01-10 16:36:49Z

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.

edited Jan 10, 2021 at 16:36

answered Jan 10, 2021 at 16:31

Pathros

10.8k21 gold badges103 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related