Laravel Mix, TailwindCSS, and PurgeCSS

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

I'm also struggling with this Sean, although my issue is that is just can't get PurgeCss to run without an error... — Jim Pannell, Jul 23 '19 at 08:56

score 0 · Answer 1 · answered May 15 '20 at 19:32

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.

score 0 · Answer 2 · answered May 24 '21 at 08:24

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

Please phrase this as an explained conditional answer, in order to avoid the impression of asking a clarification question instead of answering (for which a comment should be used instead of an answer, compare https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead ). For example like "If your problem is ... then the solution is to .... because .... ." — Yunnosch, May 25 '21 at 06:53

Laravel Mix, TailwindCSS, and PurgeCSS

2 Answers2