Tailwind v4.1 – How to prevent purge of dynamic classes like from-${type} / to-${type}?

[KoMiToRaY]

Tailwind v4.1 – How to prevent purge of dynamic classes like from-${type} / to-${type}?

Hi Tailwind team 👋

I'm using Tailwind CSS v4.1 in a Vite project, with the new @import 'tailwindcss' setup (no JS-based config).

With the new version there is no tailwind.config.js file anymore

In my Vue 3 app, I dynamically generate class names for gradients based on Pokemon types, like this:

const bgClass = `bg-gradient-to-br from-${color1} to-${color2}`

[RobinMalfait]

Hey!

There is no such thing as a purge step. Tailwind works by generating classes it can see.

You can read more about this here: https://tailwindcss.com/docs/detecting-classes-in-source-files#dynamic-class-names

One thing you can do is use CSS variables and use those in the from-(--my-from-value) and to-(--my-to-value)

[KoMiToRaY]

Thanks a lot for the quick and clear answer!

[carol-braileanu]

The question, however, remains. How can we disable this step and generate all classes in Tailwind? For example I am now using a component library linked in my Angular project and Tailwind cannot see the classes in my linked library. How can we include the entire Tailwind library?

[wongjn]

There is an infinite number of Tailwind classes so it would not be possible to generate all of them.

For a library, it should include a CSS file that has all relevant @source, @theme, @custom-variant, @utility, et al definitions. A consumer would then @import said file, and the consumer would be responsible for compiling via Tailwind. The library could also include a precompiled CSS file for non-Tailwind consumers.