Tailwind CSS interview question · Most asked
Why doesn't className={`bg-${color}-500`} work, and what should you do instead?
Summary
Tailwind never sees the complete string bg-red-500 in your source, so it doesn't generate the rule. Map values to complete class strings (const styles = { red: "bg-red-500", green: "bg-green-500" }), or safelist genuinely dynamic values with @source inline().
Longer Answer
This is the most common Tailwind production bug; it often hides locally when an earlier build or a dev safelist still has the class.
Key Points
- Fragments aren't detected.
- Map to complete strings.
- Safelist only true data.
- Hidden by stale builds.
Deep dive: Tailwind CSS in Production: The Badge That Lost Its Colour
Explanation
What interviewers look for
The mapping solution.
More most-asked Tailwind CSS questions
- How does Tailwind decide which CSS to generate?
- Explain Tailwind's responsive design approach.
- How do you customize Tailwind's design tokens in v4?
- What is Tailwind CSS and what does 'utility-first' mean?
- How do you implement dark mode with Tailwind?
- How do you avoid repeating long class lists?
- What changed in Tailwind CSS v4 compared with v3?
- How do you make Tailwind interfaces accessible?