Tailwind & PurgeCSS don't seem to play nice when using external files. [Tailwind Beta]

[frequentredundancy]

So I'm using external .pcss files for housing global styles for example the below;

// global.pcss
@tailwind base;
@tailwind components;
@tailwind utilities;

html, body {
  @apply bg-red-500;
}

I then include this file in my main.js file and all works fine in development mode.

However, I'm using the PurgeCSS PostCSS plugin with the configuration below;

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: './tailwind.config.js',
    'postcss-preset-env': {
      stage: 0,
    },
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production'
      ? {
          '@fullhuman/postcss-purgecss': {
            content: ['./src/**/*.html', './src/**/*.vue', './src/**/*.js'],
            defaultExtractor: content =>
              content.match(/[A-Za-z0-9-_:/]+/g) || [],
          },
        }
      : []),
  },
};

and it would seem it completely ignores all external styling. Even if I add something like; css: ['./src/**/*.pcss'] it still doesn't work.

Not sure if this is a tailwind extractor issue or a PostCSS issue, but hopefully someone has had this issue before and can help me out!

Just to clarify, in an older project I was using the current version of Tailwind (not Beta), and the PurgeCSS Webpack Plugin (Not PostCSS), and this wasn't an issue.

Ideally I'd like to continue using the PostCSS plugin since it seems to be a little cleaner than the webpack setup.

[adamwathan]

Can you create a project that reproduces so I can help troubleshoot? On Apr 29, 2019, 3:08 AM -0400, frequentredundancy notifications@github.com, wrote:

So I'm using external .pcss files for housing global styles for example the below; // global.pcss @tailwind base; @tailwind components; @tailwind utilities;

html, body { @apply bg-red-500; } I then include this file in my main.js file and all works fine in development mode. However, I'm using the PurgeCSS PostCSS plugin with the configuration below; // postcss.config.js module.exports = { plugins: { tailwindcss: './tailwind.config.js', 'postcss-preset-env': { stage: 0, }, autoprefixer: {}, ...(process.env.NODEENV === 'production' ? { '@fullhuman/postcss-purgecss': { content: ['./src//*.html', './src/*/.vue', './src//*.js'], defaultExtractor: content => content.match(/[A-Za-z0-9-:/]+/g) || [], }, } : []), }, }; and it would seem it completely ignores all external styling. Even if I add something like; css: ['./src/*/.pcss'] it still doesn't work. Not sure if this is a tailwind extractor issue or a PostCSS issue, but hopefully someone has had this issue before and can help me out! Just to clarify, in an older project I was using the current version of Tailwind (not Beta), and the PurgeCSS Webpack Plugin (Not PostCSS), and this wasn't an issue. Ideally I'd like to continue using the PostCSS plugin since it seems to be a little cleaner than the webpack setup. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[frequentredundancy]

@adamwathan https://github.com/frequentredundancy/purgecss-postcss

Here you go. Basically you will notice if you run with serve it works fine, but when doing build it doesn't seem to include the css defined in app.pcss.

As said in my first post, even if you include something like css: ['./src/**/*.pcss'] it's almost like PurgeCSS has no idea about these files.

Hopefully you can help figure out what's going on. :)

[adamwathan]

Looks like the repo is private right now!

[frequentredundancy]

@adamwathan Derp. Fixed. It's public now. :)

[tlgreg]

Purgecss looks for content in the src/**/*.html but your base template is the public/index.html so it never finds the html and body elements/words. It should work if you add it to the content globs.

[frequentredundancy]

@tlgreg Wow can't believe I made such a silly mistake. It now works correctly. :)

Just a bit of an additional question before I close this since I'm not too experienced with purgecss or postcss, but when it comes to importing additional libraries with styling (in my case animate.css), I've simply installed it via yarn and then I've imported it in my main.js like so;

import 'animate.css';

However, it looks like Purgecss skips this, and this obviously results in quite a lot of bloat. I presume this is because the css is generated at build time so perhaps it gets generated after postcss has run, but I can't be sure.

Thanks! :)

[ky-is]

It looks like the PurgeCSS docs mention animate.css specifically: https://www.purgecss.com/with-postcss#keyframes. (By the way, the css: option has no effect with the PostCSS plugin workflow. PostCSS is responsible for piping CSS to PurgeCSS.)

There's a lot of other caveats to be aware of when using PurgeCSS with Tailwind and Vue – Vue's class binding object syntax won't work, <transition> animation classes will be purged, etc. I explained how to fix some of these here: https://medium.com/@kyis/vue-tailwind-purgecss-the-right-way-c70d04461475 (forgive the self promotion).