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!