Handling dynamic classes

[duarten]

TL;DR: How do people generally handle computed classes? Is runtime CSS generation in the roadmap for Tailwind?

In our app, we have a very thin TypeScript layer on top of Tailwind classes (going to become even thinner with Template Literal Types), except when it comes to colors, breakpoints, and pseudo-classes, for which we have higher-level APIs (i.e., a Color object can be used to produce other colors or shades of the same color based on some parameters, and the monadic Responsive<T>/Variant<T> types allow mapping between types and classes without having to manually prefix them). Right now, we're using a conservative PurgeCSS configuration which leaves around many unused classes (all related to colors, breakpoints and pseudo-classes).

It seems like this is a common problem to run into. How do people balance dynamic classes with bundle size? We've thought about:

1. Building custom infrastructure based on CSS properties (inline styles set properties, a handful of classes use them); could get the job done, but it's code I wouldn't like to maintain;
2. Falling back to another library for runtime CSS generation of dynamic classes; seems very doable, since we have runtime access to the theme, but putting a library in the bundle doesn't really decrease its size;
3. Using a save list for PurgeCSS, which seems like a nightmare to maintain;
4. Doing nothing, and relying on compression and other techniques to ensure the bundle size isn't a problem; seems like the best option.

Ideally, there would be some form of 2) built into Tailwind. Is this something the team is thinking about? :)