Tailwind breakpoints are min-width by default. Unprefixed utilities apply to all sizes; md: and lg: apply at 768px and 1024px unless you customize the theme.
Design mobile, enhance upward
Start with a single-column layout and readable type. Add md:flex-row or lg:grid-cols-3 when wider viewports need more structure—the same mobile-first story as Utility CSS mobile-first.
Important interview questions and answers
- Q: What does md:text-xl mean?
A: At the md min-width breakpoint and above, apply text-xl; below md, earlier text size utilities win. - Q: max-md: vs md:?
A:md:is mobile-first (apply from md up).max-md:applies only below md—useful for one-off overrides.
Self-check
- Do unprefixed utilities apply on mobile?
- Why compose base layout before adding breakpoint prefixes?
Interview prep
- What does unprefixed md: mean conceptually?
Base styles apply to all sizes; prefixed utilities apply from that breakpoint up (min-width).