Tailwind CSS interview question · Most asked
What changed in Tailwind CSS v4 compared with v3?
Summary
A new, much faster engine; CSS-first configuration (@import "tailwindcss" and @theme instead of tailwind.config.js and @tailwind directives); automatic content detection; OKLCH colours; built-in container queries; modern CSS features (cascade layers, @property, color-mix). Several defaults and names changed: border is currentColor, ring is 1px, shadow/rounded/blur scales shifted, opacity utilities removed, outline-none became outline-hidden.
Longer Answer
Upgrade with npx @tailwindcss/upgrade and compare screenshots; v4 needs Safari 16.4+, Chrome 111+, Firefox 128+.
Key Points
- Faster engine.
- CSS-first config.
- Automatic detection.
- Changed defaults and renames.
Deep dive: Tailwind CSS Tutorial: Upgrading from Tailwind v3 to v4
Explanation
What interviewers look for
Both the big ideas and the breaking details.
More most-asked Tailwind CSS questions
- Why doesn't className={`bg-${color}-500`} work, and what should you do instead?
- How do you customize Tailwind's design tokens in v4?
- Explain Tailwind's responsive design approach.
- How does Tailwind decide which CSS to generate?
- What is Tailwind CSS and what does 'utility-first' mean?
- How do you avoid repeating long class lists?
- How do you make Tailwind interfaces accessible?
- What's the difference between flex and grid in Tailwind, and when do you use each?