@aplly not working with Laravel Mix 6, PostCSS 8 and Vue 2

[vb-oiko]

I'm a big fan of TailwindCSS and would like first of all to thank the Tailwind team for your hard work!

Describe the problem:

I was working with PostCSS 7 and compatibility build of Tailwind 2 when I decided to upgrade to PostCSS 8.
When I did that @apply stopped working.
I created a simple example project with Laravel Mix 6, PostCSS 8 and Vue from scratch to check myself if there is something wrong with my actual project and to make the reproduction of the bug more demonstrative. The bug is still there.

Link to a minimal reproduction:

https://github.com/vb-oiko/example-laravel-vue-tailwind/blob/main/resources/js/views/app.vue

[adamwathan]

Change your webpack.mix.js file to look like this:

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css');
    .options({
        postCss: [
            require('tailwindcss'),
        ]
    })

You need to configure PostCSS globally for things to work inside of Vue components, not just for that one CSS file 👍

[vb-oiko]

thanks @adamwathan it really helped! I had spent several hours trying to get it work and as usual it was so simple to fix.
Thanks again for such an amzing product as Tailwind!