Why do dynamically constructed Tailwind class names fail to render?
Assesses fundamental understanding of Tailwind CSS conventions, runtime behavior, and memory/performance considerations.
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
Tailwind's JIT scans the files listed in content and generates only classes it finds as literal strings. Class names built dynamically are invisible to the scanner.
// broken: no utility generated
const cls = `bg-${color}-500`;
// works: full class names present in source
const cls = color === 'red' ? 'bg-red-500' : 'bg-blue-500';
This is the most common Tailwind bug. Fixes: write complete class names in a lookup map or object, add a safelist in the config for values you cannot enumerate, or use inline styles for truly dynamic values.
The content array must include every file type that contains classes, including .vue, .svelte, .php and template files, and broad globs like ./src/**/* are fine. In v4 content is auto-detected, but explicit sources still help with generated files. Keeping class strings static also matters for frameworks that purge unused styles in production.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.