Using Tailwind CSS 1.4’s built-in PurgeCSS Options with Sage 9

hello all, I have added PurgeCSS to my project by following this guide: Removing unused CSS with Purgecss/UnCSS and ran into an issue.

The issue is my tailwindcss built-in utility class w-1/3 is not evaluated into width:33.333333% when I enable purgecss. Other styles look broken too.
These are my local VS remote screenshots:

  • my tailwind.config.js is out-the-box default config
  • I am sure this issue is about purgecss. My styles come back to normal as soon as I comment out purgecss stuff at webpack.config.optimize.js

my package versions:

  • purgecss-webpack-plugin@0.23.0
  • tailwindcss@1.4.1
  • webpack@3.10.0

Question - How do I debug and fix issues like that? I am scared.

Where do you use .w-1/3 in your theme? Have you made sure PurgeCSS is checking that location?

Where do you use .w-1/3 in your theme?

I use class .w-1/3 in a Vue JS component at resources/assets/scripts/vue/vue2-map/src/components/ButtonRow.vue

Have you made sure PurgeCSS is checking that location?

Yes I think so. This is my plugin section from webpack.config.optimize.js and ls output. I have added the last line to paths:

...
    new PurgecssPlugin({
      paths: glob.sync([
        'app/**/*.php',
        'resources/views/**/*.php',
        'resources/assets/scripts/**/*.js',
        'resources/assets/scripts/vue/vue2-map/src/**/*.vue',
      ]),
      whitelist: [ // Only if you need it!
      ],
    }),
  ],
};

ButtonRow.vue with .w-1/3 class is targeted by the paths above:

ll resources/assets/scripts/vue/vue2-map/src/**/*.vue

resources/assets/scripts/vue/vue2-map/src/components/App.vue
resources/assets/scripts/vue/vue2-map/src/components/ButtonRow.vue*
resources/assets/scripts/vue/vue2-map/src/components/CheckboxCard.vue
...others

@kpoxo6op Since you are using Tailwind CSS 1.4, I’d recommend using the new built-in PurgeCSS feature. You configure it like so:

// tailwind.config.js
module.exports = {
  purge: {
    content: [
      // relative path globs to template files
    ],
    options: {
      // purgecss options (e.g. whitelist: [], etc.)
    },
  },
  theme: {},
  // etc.
};

The built-in PurgeCSS feature only purges when the NODE_ENV is production as well, it has a preconfigured default extractor (this is what I suspect is causing you issues above, since that guide was not Tailwind specific, but I had included the default extractor in the old Tailwind guide).

Yes, I tried Tailwind CSS built-in PurgeCSS as well.
I updated Tailwind CSS to 1.4 and added purgecss to my tailwind.config.js:

/module.exports = {
  purge: {
    content: [
      '../../../app/**/*.php',
      '../../../resources/views/**/*.php',
      '../../../resources/assets/scripts/**/*.js',
      '../../../resources/assets/scripts/vue/vue2-map/src/**/*.vue',
    ],
  },
  theme: {

TailwindCSS purgecss totally destroys my styles on remote, I can’t even say what’s not broken on my page now.

What else can I try?

Interesting. I just created a Sage 9 project with the Tailwind preset and gave this a try. It seems like the content array cannot include relative paths (presumably since it’s an array of globs).

Here’s a quick solution:

const {PWD} = process.env; // This will not have a trailing slash

module.exports = {
  /** this is shorthand of purge.content if you don’t have any purge.options to specify */
  purge: [
    `${PWD}/resources/views/**/*.blade.php`,
    `${PWD}/resources/assets/scripts/**/*.{js,vue}`,
  ],
  theme: {/* ... */},
};

You might need to delete the .cache-loader directory from the root of your project in order to get webpack to actually recompile the styles (since the config has changed, but not the files). That might just be for JS files though (I don’t remember).

6 Likes

yaaay it worked, thanks for your help! My minified styles are not broken anymore.
image

1 Like