PurgeCSS remove first components class when using whitelist comment

[florianbouvot]

Hi tailwindlabs team,

I noticed the following point with the building PurgeCSS.

If I import a CSS file before @tailwind components; and use PurgeCSS whitelist comment: .container classes are remove but not responsive container classes.

My Sass file

@tailwind base;

/* purgecss start ignore */
@import "button";
/* purgecss end ignore */

@tailwind components;

@tailwind utilities;

I make different test using exclamation mark in comment, ... same result

I use last tailwindcss 1.7.5, sass, csso.

My tailwind.config.js

module.exports = {
  purge: [
    'path/to/templates',
  ],
  future: {
    removeDeprecatedGapUtilities: true,
  },
  experimental: {
    applyComplexClasses: true,
    uniformColorPalette: true,
    extendedSpacingScale: true,
    defaultLineHeights: true,
    extendedFontSizeScale: true,
  },
}

[florianbouvot]

I can use mode: all + PurgeCSS comment as a work around.

[adamwathan]

Can you create a simple project that reproduces the issue? We got a lot of issues that require me to manually recreate someone's project from scratch and I unfortunately just don't have time for that so things end up going unfixed. If you can provide something I can clone and start troubleshooting with right away it's much easier for me to find time to diagnose and fix the issue.

[adamwathan]

Was able to reproduce this but realizing it sort of doesn't make sense to configure things this way. Using your config, your custom button styles are already protected from purging, because only the @tailwind utilities block gets purged, so the comments are redundant.

I agree this shouldn't break the way it is and we should handle it more gracefully or fail with a clear error, but in the mean time just delete those comments and you're good 👍