Tailwind CSS interview question · Most asked
Explain Tailwind's responsive design approach.
Summary
Mobile first: unprefixed utilities apply to all sizes; breakpoint prefixes (sm:, md:, lg:, xl:, 2xl:) apply from that minimum width upwards. Design the phone layout first, then add prefixes for wider screens. max-*: variants target below a breakpoint.
Longer Answer
A common mistake is reading sm: as "small screens only". Container queries (@container with @md: and similar) let components respond to their own width instead of the viewport.
Key Points
- Mobile first.
- Prefixes are min-width.
- max-* for below.
- Container queries for components.
Deep dive: Tailwind CSS Tutorial: Responsive Design
Explanation
What interviewers look for
Correct min-width semantics.
More most-asked Tailwind CSS questions
- How does Tailwind decide which CSS to generate?
- Why doesn't className={`bg-${color}-500`} work, and what should you do instead?
- 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?