How to check if Tailwind actually purges css?

Viewed 1028

I have a gatsby site, and I want to bring the css bundle size down. I was using the popular plugin gatsby-plugin-purgecss, but it breaks my site even with configurations, and recently tailwind seemed to have added direct support for purgecss: https://tailwindcss.com/docs/controlling-file-size

However, when using the new method with purging directly from tailwind, I can't tell if the css is being purged or not.

Here is my tailwind.config.js

module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.jsx',
  ],
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  theme: {
    extend: {
      backgroundColor: {
        primary: 'var(--color-bg-primary)',
      },
    },
  },
  variants: {},
  plugins: [],
};

When I run gatsby build && gatsby serve, nothing in the terminal suggests that the css bundle is being reduced. How can I check?

1 Answers

You can check the size of the css file in the Developer Tools of your preferred Browser.

  1. Open the Developer Tools
  2. Switch to the Network Tab
  3. Filter by CSS
  4. Reload the site
  5. Hover over the size column
Related