Laravel Tailwind the abstraction is not taking effect when using the #apply directive - laravel-mix

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()
Dashboard
Projects
#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?

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.