Tailwind CSS interview question · Most asked
What's the difference between flex and grid in Tailwind, and when do you use each?
Summary
flex lays items out in one dimension (a row or column) with alignment via items-* and justify-; ideal for navbars, toolbars and centring. grid lays out in two dimensions with grid-cols-, col-span-* and gap; ideal for card grids and page layouts. They combine: a grid of cards whose insides use flex.
Longer Answer
grid-cols-[repeat(auto-fill,minmax(12rem,1fr))] makes responsive card grids without breakpoints.
Key Points
- flex: one dimension.
- grid: two dimensions.
- gap in both.
- Combine them.
Deep dive: Tailwind CSS Tutorial: CSS Grid
Explanation
What interviewers look for
Picks the right tool with examples.
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?
- What changed in Tailwind CSS v4 compared with v3?
- How do you make Tailwind interfaces accessible?