How is it possible to specify a safelist in TailwindCSS v4? Is it possible to list patterns and variants instead of full class names?

Question

How to make a safelist in TailwindCSS v4?

As of now tailwind v4 preferable configuration is to use CSS. Not a .config.js anymore. But even if I use the JS-based configuration, the safelist property is already disabled in it and can no longer be used from v4 onwards.

In v3 in a file tailwind.config.js we could do:

export default {
  safelist: [
    {
      pattern: /grid-cols-+/,
      variants: ["sm", "md", "lg", "xl"],
    },
  ],
}

Now my workaround is to use a dummy-styled, invisible html or combinations of CSS styles with @apply sm:grid-cols-1 sm:grid-cols-2 lg:grid-cols-1... etc. Unfortunately this is what my UI and user options are done.

Have they dropped this feature? Can this be done "easly" in the TailwindCSS v4?

Answer 1

For Tailwind CSS v4.1+, I recommend you use Use @source inline(..) in my other answer.

---

Original answer:

By default only used CSS variables will be generated in the final CSS output. If you want to always generate all CSS variables, you can use the theme option: static

@import "tailwindcss";
@theme static {
  --color-primary: var(--color-red-500);
  --color-secondary: var(--color-blue-500);
}

• Generating all CSS variables - TailwindCSS v4 Docs

But unfortunately, with this setting, only individual parameters can be statically defined. It's a much more limited option compared to the v3 safelist.