Dynamic utility classes excluded from Tailwind CSS v3 JIT output
0 reputation · 18 Dec 2024, 16:42 UTC
Dynamic utility classes missing from Tailwind CSS v3 production CSS
Tailwind CSS v3 runs the Just-in-Time engine by default and only emits utilities that appear as literal strings inside configured content paths. Class names assembled at runtime with template literals or concatenation, such as text-${color}-500, are invisible to that static scan. As a result, styles that work during development can disappear from the production build.
The goal is to keep dynamically generated utilities available without guessing every possible variant. The safelist setting can preserve classes the scanner cannot discover, but a large safelist may increase output size and build time. This question assumes Tailwind CSS v3.x; behavior in later major versions may differ.
What is the recommended boundary between safelisting dynamic patterns and refactoring them into complete literal class strings? Are there configuration options that safely cover generated utility names without listing each variant? What criteria should determine whether a dynamic utility is safelisted versus rewritten as a complete literal?