Tailwind CSS not getting parsed (PostCSS)

[croxton]

This line in webpack.mix.js no longer seems to parse TailwindCSS directives (just remains as e.g.@tailwind components; in the generated CSS. This was working previously, and I I think https://github.com/ben-rogerson/agency-webpack-mix-config/commit/0be9d43b801b3f6b94114d16151bc7b24c310a16 was the change that broke it.

mix.options({
    postCss: [
         require('tailwindcss')('./tailwind.config.js'),
     ],
})

[ben-rogerson]

Hey Mark, you're right there, it now seems that specifying multiple postCss: [...] blocks aren't being merged like they used to.

To fix this, I've made a few changes to the way I recommend postCss plugins to be loaded.

Instead of multiple postCss arrays:

mix.options({
    postCss: [
         require('tailwindcss')('./tailwind.config.js'), // <- this plugin doesn't register
     ],
})
mix.options({
    postCss: [
         require("postcss-preset-env")({ stage: 2 }), // <- this plugin registers
     ],
})

Now combine them into a single array:

const postCssPlugins = [
    require('tailwindcss')('./tailwind.config.js'), // <- this plugin registers
    require("postcss-preset-env")({ stage: 2 }), // <- this plugin registers
]
mix.options({ postCss: postCssPlugins })

Let me know if this works for you.

[croxton]

Thank you! I can confirm that works, with one change: I commented out this line at the bottom of webpack.mix.js:

mix.options({
    hmrOptions: {
        port: config.webpackDevServerPort,
    },
})

[ben-rogerson]

Great to hear it's working again. The hmrOptions didn't seem to cause any issues for me but I'll look a little further into it 👍

[ben-rogerson]

Tested again and couldn't find any issues the hmrOptions being present. I'll close this for now but if you'd like me to look further into it, perhaps send over your config.

Cheers