How do you stop tailwindcss 4 from purging unused css classes?

[klyn]

I am working on a project that renders user generated content. I am using v4 and there seem to be no way to keep the engine away from purging my css classes. I don't really want to go and make a safe-list and maintain it and nothing else seems to work for the v4, from global scoping to forced imports via side-effects in the main entry files.

Any suggestions?

[wongjn]

Not a solution, but wanted to clarify that Tailwind doesn't purge unused CSS classes per se. Rather, it never generates them in the first place.

[rozsazoltan]

Yeah. Tailwind CSS only includes the class names it can detect in the source code in the generated CSS; anything it cannot detect is not included. This is how it ensures that the compiled CSS stays small.

If user-generated content introduces some form of dynamism, for example bg-{$color} or something similar, that is not correct. Tailwind CSS analyzes the source code, and in the case of bg-{$color} it will not find a valid color; it also will not include all possible colors in the compiled CSS, because that would lead to a large number of unused CSS classes. In such dynamic cases, it is better to rely on CSS variables, for example bg-(--color), and then set the value of the CSS variable via JavaScript. For colors, it is important that all CSS variables are shipped statically, but this still results in a much smaller CSS output than shipping every possible text-*, bg-*, border-*, ring-*, etc. class.

• How do you reference dynamic classes/utilities using a JS variable and pass them through in the class attribute inline in HTML?
• Tailwind CSS, class precedence is not respected - But an interesting concept could also be an if/else-like solution implemented using inline data attributes.

Since your exact use case and reproduction steps are not known, the above is simply me thinking out loud.

From the purging behavior, I assume that you checked DevTools and cannot find the custom classes you declared:

• If not, then check again; it may simply be a CSS specificity issue.
• If they are not there, then your custom CSS is being imported incorrectly somewhere, because - as Wongjn also pointed out - Tailwind CSS does not remove those.

[klyn]

Yeah, thanks, not sure how, but forced imports seem to have started working now. I hear your point about using CSS variables, but I think allowing the user to decide to whether build a full CSS file or not, is not a bad thing, as in, you are assuming the CSS file will be large in each and every case and you are also assuming that all users would rather have unused classes not included in the generated CSS file.

In my opinion, these are big assumptions and will cause some headache for some users, but regardless, thanks for the reply to both of you.