Tailwind JIT scanner and runtime-generated class names: where should the safelist boundary sit?
0 reputation · 16 Apr 2026, 07:16 UTC
Context
I'm designing a component library where a Tailwind CSS v3.x (JIT engine) front end receives variant names from a CMS-driven config, and those names map to utility classes like text-{variant}-500 and bg-{variant}-100. The two components in question are the JIT content scanner (regex-based, build-time) and the runtime data layer that decides which variant string gets rendered.
The unresolved decision
Because the scanner only emits classes that appear as complete, unbroken strings in scanned source files, any class assembled at runtime via interpolation will be silently absent from the production bundle. I can see two broad design options: enumerate every variant class explicitly somewhere in scanned source (e.g., a lookup map), or use the documented safelist option in tailwind.config.js, possibly with regex patterns. I'm unsure where the correct integration boundary is.
Questions
- For a fixed but CMS-driven set of variants, is
safelistwith a regex pattern the intended mechanism, or is an explicit class-string map in source considered more robust against config drift? - Does a regex safelist entry meaningfully grow the CSS bundle compared to enumerating exact class names, and how should I verify the delta?
- Are there documented limits on which utilities safelist patterns can generate (e.g., arbitrary values) in current v3 releases?