HTML & CSS · Middle · Question 42 of 75
Why can't you build a Tailwind class name like ` bg-${color}-500 `?
- 1Tailwind forbids template strings in
classNameand fails the build - ✓Correct answer: The scanner looks for complete class names in code; a class built at runtime won't reach the CSS
- 3It only works in development mode, because JIT is disabled in production
Explanation
Tailwind doesn't run your code; it statically scans files for class-like tokens. The string bg-${color}-500 doesn't contain a complete name, so bg-red-500 isn't generated. The right way is mapping to full names: { red: "bg-red-500", blue: "bg-blue-500" }[color].