Tailwindcss: TailwindCSS 1.8 doesn't purge

[LZL0]

Describe the problem:

TailwindCSS 1.8 fails to purge CSS. No layers-related experimental flags were set. The config in both cases as follows:

// tailwind.config.js
module.exports = {
  theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Gilroy', 'sans-serif'],
    },
    extend: {
      colors: {
        fsbg: '#f6f7fa',
        fsdgrey: '#545860',
        fsgrey: '#767d8c',
        fsblack: '#363940',
        fsblue: '#283182'
      },
      screens: {
        'print': {'raw': 'print'},
        // => @media  print { ... }
      }
    }
  },
  plugins: [
    require('postcss'),
    require('@tailwindcss/custom-forms'),
    require('autoprefixer'),
  ],
  experimental: {
    uniformColorPalette: true,
    extendedSpacingScale: true,
    applyComplexClasses: true,
  },
  purge: {
    enabled: true,
    content: ['**/*.php'],

    // These options are passed through directly to PurgeCSS
    options: {
      whitelist: ['hidden', 'absolute', 'relative'],
    }
  },
}

Result (TailwindCSS version 1.7.x):

tailwindcss 1.7.6

   � Building: tailwind-styles.css

warn - You have enabled experimental features: uniformColorPalette, extendedSpacingScale, applyComplexClasses
warn - Experimental features are not covered by semver, may introduce breaking changes, and can change at any time.

risk - There are upcoming breaking changes: removeDeprecatedGapUtilities
risk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.
risk - https://tailwindcss.com/docs/upcoming-changes

   ✅ Finished in 6.33 s   
   � Size: 68.45KB        
   � Saved to tailwind.css

TailwindCSS version 1.8:

tailwindcss 1.8.0

   � Building: tailwind-styles.css

warn - You have enabled experimental features: uniformColorPalette, extendedSpacingScale, applyComplexClasses
warn - Experimental features are not covered by semver, may introduce breaking changes, and can change at any time.

risk - There are upcoming breaking changes: removeDeprecatedGapUtilities, purgeLayersByDefault
risk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.
risk - https://tailwindcss.com/docs/upcoming-changes

warn - The `conservative` purge mode will be removed in Tailwind 2.0.
warn - Please switch to the new `layers` mode instead.

   ✅ Finished in 7.26 s
   � Size: 3.89MB
   � Saved to tailwind.css

Maybe I am missing something. Let me know should you need any further info.

[LZL0]

It also takes around the same time for the second one to complete. Does it write the result to disk?

[brycewray]

Same result here. My tailwind.config.js:

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: {
    content: [
      './src/**/*.js',
      './src/**/*.11ty.js',
    ],
  },
  theme: {
    backgroundImage: {
      'gradient-to-t': 'linear-gradient(to top, var(--gradient-color-stops))',
      'gradient-to-tr': 'linear-gradient(to top right, var(--gradient-color-stops))',
      'gradient-to-r': 'linear-gradient(to right, var(--gradient-color-stops))',
      'gradient-to-br': 'linear-gradient(to bottom right, var(--gradient-color-stops))',
      'gradient-to-b': 'linear-gradient(to bottom, var(--gradient-color-stops))',
      'gradient-to-bl': 'linear-gradient(to bottom left, var(--gradient-color-stops))',
      'gradient-to-l': 'linear-gradient(to left, var(--gradient-color-stops))',
      'gradient-to-tl': 'linear-gradient(to top left, var(--gradient-color-stops))',
    },
    gradientColorStops: (theme) => theme('colors'),
    screens: {
      'sm': '640px',  // => @media (min-width: 640px) { ... }
      'md': '768px',  // => @media (min-width: 768px) { ... }
      'lg': '1024px', // => @media (min-width: 1024px) { ... }
      'xl': '1280px', // => @media (min-width: 1280px) { ... }
      'xb': '1920px', // => @media (min-width: 1920px) { ... }
    },
    fontFamily: {
      body: ['Public Sans', 'sans-serif'],
    },
    extend: {
      screens: {
        'dark': {
          'raw': '(prefers-color-scheme: dark)',
        },
      },
      fontSize: { // these will cease to be relevant with TWCSS 2.0, which will add 7xl, 8xl, **and** 9xl
        '7xl': '4.5rem',
        '8xl': '5rem',
      },
      colors: {
        blue: {
          '100': '#bbeeff',
          '200': '#00aaff',
          '300': '#0088ff',
          '400': '#0033ff',
          '500': '#0000ff',
          '600': '#0000bb',
          '700': '#0000aa',
          '800': '#000088',
          '900': '#000066',
        },
      },
    },
  },
  variants: {},
  plugins: [],
}

When I launched my particular dev command, got this in the console:

⚠  Empty property '--font-variant-numeric-ordinal' at 20556:2. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-slashed-zero' at 20557:2. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-figure' at 20558:2. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-spacing' at 20559:2. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-fractions' at 20560:2. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-ordinal' at 42218:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-slashed-zero' at 42219:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-figure' at 42220:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-spacing' at 42221:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-fractions' at 42222:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-ordinal' at 63850:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-slashed-zero' at 63851:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-figure' at 63852:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-spacing' at 63853:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-fractions' at 63854:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-ordinal' at 85482:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-slashed-zero' at 85483:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-figure' at 85484:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-spacing' at 85485:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-fractions' at 85486:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-ordinal' at 107114:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-slashed-zero' at 107115:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-figure' at 107116:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-spacing' at 107117:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-fractions' at 107118:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-ordinal' at 128746:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-slashed-zero' at 128747:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-figure' at 128748:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-spacing' at 128749:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-fractions' at 128750:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-ordinal' at 150378:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-slashed-zero' at 150379:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-figure' at 150380:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-spacing' at 150381:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-fractions' at 150382:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-ordinal' at 172010:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-slashed-zero' at 172011:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-figure' at 172012:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-spacing' at 172013:4. Ignoring. [clean]
⚠  Empty property '--font-variant-numeric-fractions' at 172014:4. Ignoring. [clean]

[RobinMalfait]

Thanks for the bug report, I'll look into it immediately!