Tailwind CSS: add pattern for important classnames to safelist

August 8, 2023

Is it possible to create safelist based on pattern with normal and important classnames, similar like we can add variants?

For example tailwind.config.js

module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  safelist: [
    'text-2xl',
    'text-3xl',
    {
      pattern: /bg-(red|green|blue)-(100|200|300)/,
      variants: ['!'], // IT DOES NOT WORK
    },
  ],
  // ...
}

>Solution :

It is possible. The exclamation mark prefix would be part of the pattern:

{
  pattern: /^!?bg-(red|green|blue)-(100|200|300)$/,
}

This would produce both bg-red-100 as well as !bg-red-100, et al. See it working in this Tailwind Play (open the Generated CSS panel to see the results).