Tailwind CSS interview question · Most asked
How do you customize Tailwind's design tokens in v4?
Summary
With theme variables in CSS: @theme { --color-brand-500: …; --font-display: …; --breakpoint-3xl: …; }. Each namespace creates utilities (bg-brand-500, font-display, 3xl:) and the values are also CSS variables usable anywhere. Reset a namespace with --color-*: initial.
Longer Answer
Prefer semantic names (primary, surface, danger) on top of a primitive palette so rebrands change values, not markup.
Key Points
- @theme in CSS.
- Namespaces create utilities.
- Values are CSS variables.
- Semantic naming.
Explanation
What interviewers look for
CSS-first config, not just tailwind.config.js.
More most-asked Tailwind CSS questions
- Explain Tailwind's responsive design approach.
- How does Tailwind decide which CSS to generate?
- Why doesn't className={`bg-${color}-500`} work, and what should you do instead?
- 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?