Skip to content

Archive

StyleX

1 articles
CSS 19 Sep 2026 8 min read

Runtime Class Composition Is Not CSS Generation

A function that returns a class string and a compiler that emits CSS solve different problems, even when both eventually produce a `class` attribute in the browser. That distinction matters when a Tailwind component recipe starts like this: const button = tv({ base: 'inline-flex rounded-md', variants: { color: { success: 'bg-green-500 hover:bg-green-700', }, disabled: { true: 'pointer-events-none opacity-50', }, }, compoundVariants: [ { color: 'success', disabled: true, class: 'bg-green-300 hover:bg-green-300', }, ], }); It is tempting to expect a build step to turn that recipe into a semantic selector such as: