Laravel Mix, TailwindCSS, and PurgeCSS - laravel-mix

Question

First time using laravel mix, I'm sure I'm missing something simple.
I have a project where I'm attempting to use Laravel mix to compile tailwindcss and then use purge to remove any unused css.
package.json
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"repository": {
"type": "git",
"url": "git+ssh://*******************.git"
},
"author": "Sean Smith",
"license": "ISC",
"homepage": "**************",
"devDependencies": {
"cross-env": "^5.2.0",
"laravel-mix": "^4.0.16",
"laravel-mix-purgecss": "^4.1.0",
"postcss-easy-import": "^3.0.0",
"postcss-import": "^12.0.1",
"postcss-nested": "^4.1.2",
"postcss-preset-env": "^6.6.0",
"tailwindcss": "^1.0.3"
},
"dependencies": {
"cross-env": "^5.2.0",
"laravel-mix-purgecss": "^4.1.0"
}
}
webpack.mix.js:
// copied from https://gist.github.com/Log1x/8c1d63024cad15cfb05eec495c41a75b
const mix = require('laravel-mix')
require('laravel-mix-purgecss')
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Sage application. By default, we are compiling the Sass file
| for your application, as well as bundling up your JS files.
|
*/
// Public Path
mix.setPublicPath('./public')
// Browsersync
// mix.browserSync('https://example.test')
/**
* Custom PurgeCSS Extractor
* https://github.com/FullHuman/purgecss
* https://github.com/FullHuman/purgecss-webpack-plugin
*/
// Styles
mix.postCss('src/css/styles.css', 'public/assets/css', [
require('postcss-import')(),
require('tailwindcss')('./tailwind.config.js'),
require('postcss-nested')(),
require('postcss-preset-env')(),
]).purgeCss({
enabled: mix.inProduction(),
folders: ['src', 'templates'],
extensions: ['twig','html','js','php', 'vue'],
extractorPattern: [/[a-zA-Z0-9-:_/]+/g],
})
// JavaScript
mix.js('src/js/app.js', 'public/assets/js')
.extract()
// Source maps when not in production.
if (!mix.inProduction()) {
mix.sourceMaps()
}
// Hash and version files in production.
if (mix.inProduction()) {
mix.version()
}
When I run npm run prod everything appears to work correctly. However in the exported styles.css the only styles that are there are from from tailwind/base
styles.css
/* tailwind base; */
#import "tailwindcss/base";
/* tailwind components; */
#import "tailwindcss/components";
/* tailwind utilities; */
#import "tailwindcss/utilities";
/* all shared css here */
#import "./components/shared.css"
None of the classes that are in my templates/index.twig file have been added nor are the styles in ./components/shared.css file.
classes exist in both index.html and shared.css so should not be purged
When I remove purgeCSS the output css file includes everything as expected. However when purge is added in the only output is tailwind/base css.
Please advise.
Here's a screenshot of my directory structure

Answer 1

When you use mix.postCss() or a separate postcss.config.js file, Mix overrides all other PostCSS plugins, including the PurgeCSS instance, added by this plugin.
To work around this issue, include your PostCSS plugins with mix.options()
const mix = require('laravel-mix');
require('laravel-mix-purgecss');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css')
.options({
postCss: [require('tailwindcss')]
})
.purgeCss({
enabled: mix.inProduction(),
});
Refer https://github.com/spatie/laravel-mix-purgecss for more details.

Answer 2

Can you please show us your tailwind.config.js file ?
The file should contain something like that :
module.exports = {
purge: [
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
theme: {
extend: {
lineClamp: {
10 :"10",
12 : "12"
},
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
},
variants: {
extend: {
lineClamp : ["hover"],
opacity: ['disabled'],
},
},
plugins: [require("#tailwindcss/line-clamp"), require('#tailwindcss/forms'), require('#tailwindcss/typography')],
};
purge array should contain the file that you would like to be purged.
purge: [
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
In this exemple above, the command purge will purge the file at the directory /vendor/laravel/jetstream/ and ** mean look at all subfolder under jetstream and finaly the * mean that all file that have .blade.php extension at the jetstream folder and folder should be purged