@apply not working inside Vue component in Laravel Mix
It seems this may be a bug in Laravel Mix, see this issue.
Try adding the following to your Mix config (source):
.webpackConfig({ module: { rules: [ { test: /\.(postcss)$/, use: [ 'vue-style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader' ] } ], },})
For the above answer to work make sure to create a postcss.config.js file if you don't have it already and paste this snippet inside
const purgecss = require('@fullhuman/postcss-purgecss')({ content: [ './resources/**/*.vue', './resources/**/*.js' ], whitelistPatterns: [ /-(leave|enter|appear)(|-(to|from|active))$/, /data-v-.*/, /v-deep/ ], whitelistPatternsChildren: [ /pretty$/, /xmx-.*$/, /^(.*?)\.tooltip/ ], defaultExtractor: content => content.match(/[\w-/.:]+(?<!:)/g) || []})module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer'), ...process.env.NODE_ENV === 'production' ? [purgecss] : [] ]}Here is the source [https://github.com/JeffreyWay/laravel-mix/issues/2312]