Tailwind CSS utility generation vs runtime‑composed class names: safelist or source refactor

Goal

Ensure that every utility class needed at runtime appears in the production CSS even when class names are assembled dynamically, such as via string concatenation in JavaScript templates.

Constraints

Tailwind’s content scan only detects literal class names in configured files; dynamically built strings are ignored unless explicitly safelisted. Adding safelist entries guarantees generation but introduces configuration overhead, while refactoring to literal names eliminates the need for safelist but may require code changes.

• What impact does each approach have on long‑term maintainability and code readability?
• How does using a safelist affect build reproducibility and cache invalidation compared with refactoring?
• Which strategy aligns better with existing linting rules and team‑wide styling conventions?