How to configure Tailwind + Postcss with VueJS in Laravel InertiaJS - vue.js

Question

I am new to setting up the tailwind/postcss configuration using Intertia.js/Vue.js and would appreciate some guidance with my configuration files!
My goal is to be able to write postcss/scss style within my vue components, with the ability to use the postcss #apply functionality for example, like so:
Navigation.vue:
<style lang="postcss">
.nav-items {
#apply bg-red;
}
</style>
With the current configuration setup I have, I am not getting any errors compiling however the style is not being applied, it doesn't appear in the Styles in console for the element.
webpack.mix.js
const mix = require('laravel-mix')
const path = require('path')
const purgecss = require('#fullhuman/postcss-purgecss')
const tailwindcss = require('tailwindcss')
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css/app.css')
.options({
postCss: [
tailwindcss('tailwind.config.js'),
...mix.inProduction() ? [
purgecss({
content: ['./resources/views/**/*.blade.php', './resources/js/**/*.vue'],
defaultExtractor: content => content.match(/[\w-/:.]+(?<!:)/g) || [],
whitelistPatternsChildren: [/nprogress/],
}),
] : [],
],
})
.webpackConfig({
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.js',
'#': path.resolve('resources/js'),
ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
},
},
module: {
rules: [
{
test: /\.postcss$/,
loaders: [
"style-loader",
{
loader: "css-loader",
options: { modules: true, importLoaders: 1 }
},
"postcss-loader",
]
}
]
}
})
.version()
.sourceMaps()
tailwind.config.js:
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
purge: [
'./resources/views/**/*.blade.php',
'./resources/css/**/*.css',
],
sourceMap: false,
theme: {
//...
},
plugins: [],
}
postcss.config.js:
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
],
};
package.json:
{
//...
"devDependencies": {
"#babel/preset-env": "^7.9.6",
"#tailwindcss/custom-forms": "^0.2.1",
"axios": "^0.19",
"cross-env": "^7.0",
"css-loader": "^3.5.3",
"laravel-mix": "^5.0.1",
"laravel-mix-tailwind": "^0.1.0",
"lodash": "^4.17.13",
"postcss-css-variables": "^0.17.0",
"postcss-loader": "^3.0.0",
"postcss-nesting": "^7.0.1",
"resolve-url-loader": "^3.1.0",
"sass": "^1.15.2",
"sass-loader": "^8.0.0",
"style-loader": "^1.2.1",
"tailwindcss": "^1.4",
"vue-svgicon": "^3.2.6",
"vue-template-compiler": "^2.6.11"
},
"dependencies": {
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#inertiajs/inertia": "^0.1.9",
"#inertiajs/inertia-vue": "^0.1.4",
"alpinejs": "^2.3.5",
"popper.js": "^1.16.1",
"portal-vue": "^2.1.7",
"postcss-import": "^12.0.1",
"postcss-nested": "^4.2.1",
"postcss-nested-ancestors": "^2.0.0",
"vue": "^2.6.11",
"vue-i18n": "^8.17.7",
"vue-meta": "^2.3.3"
}
}

Answer 1

Add this to webpack.config.js :
module: {
rules: [
{
test: /\.(postcss)$/,
use: [
'vue-style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
}
],
},
Found here https://github.com/JeffreyWay/laravel-mix/issues/2211#issuecomment-546123921