Responsive Design
Learn Tailwind CSS's mobile-first responsive design philosophy and how to use sm:, md:, lg:, xl:, and 2xl: breakpoint prefixes.
Introduction
Modern websites need to look great on phones, tablets, laptops, and large desktop monitors. Tailwind CSS builds responsiveness directly into every utility class through breakpoint prefixes like sm:, md:, and lg:, so you can adjust styles at different screen widths without writing a single media query by hand.
- Why Tailwind is designed mobile-first.
- The default breakpoint scale.
- How to apply a utility only at certain screen widths.
- How to build a responsive grid layout.
- How to hide or show elements per breakpoint.
Mobile-First Philosophy
Tailwind is a mobile-first framework. Unprefixed utilities (like text-center) apply to all screen sizes, starting from the smallest. A prefixed utility (like md:text-left) only takes effect at that breakpoint and above. This means you design for mobile first, then layer on adjustments as the screen grows — the opposite of designing for desktop and shrinking down.
<p class="text-center md:text-left"> This text is centered on mobile, but left-aligned on medium screens and up.</p>Click Run to see what this code prints.
Default Breakpoints
Tailwind ships with five default breakpoints, each representing a minimum viewport width. A media query is generated using min-width, so styles at a given breakpoint apply from that width upward.
| Prefix | Minimum Width | Typical Device |
|---|---|---|
| sm: | 640px | Large phones |
| md: | 768px | Tablets |
| lg: | 1024px | Laptops |
| xl: | 1280px | Desktops |
| 2xl: | 1536px | Large monitors |
Using Responsive Prefixes
Any utility class can be prefixed with a breakpoint name followed by a colon. You can stack multiple prefixed versions of the same property to progressively adjust a value as the screen grows.
<div class="w-full sm:w-3/4 md:w-1/2 lg:w-1/3 bg-violet-500 text-white p-4 rounded-lg"> Responsive width box</div>Click Run to see what this code prints.
Responsive Grid Example
Combining responsive prefixes with grid-cols-* is one of the most common patterns in Tailwind. A single row of markup can rearrange from one column on mobile to four columns on desktop.
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> <div class="bg-pink-500 text-white p-6 rounded-lg">Card 1</div> <div class="bg-pink-500 text-white p-6 rounded-lg">Card 2</div> <div class="bg-pink-500 text-white p-6 rounded-lg">Card 3</div> <div class="bg-pink-500 text-white p-6 rounded-lg">Card 4</div></div>Click Run to see what this code prints.
Hiding and Showing Elements
You can combine the hidden utility with a responsive display utility like block or flex to show or hide elements at different breakpoints, a common pattern for switching between a mobile hamburger menu and a full desktop navigation bar.
<button class="lg:hidden">☰ Menu</button><nav class="hidden lg:flex gap-6"> <a href="#">Home</a> <a href="#">Courses</a> <a href="#">About</a></nav>Click Run to see what this code prints.
Common Mistakes
- Designing desktop-first and adding sm: overrides for mobile, which fights Tailwind's mobile-first defaults.
- Forgetting that a prefixed class applies from that breakpoint upward, not just at that exact width.
- Overusing breakpoints when a simpler flex-wrap or fluid width would adapt naturally.
- Hiding content with hidden instead of properly reflowing the layout, which can hurt accessibility.
- Not testing intermediate widths between breakpoints, where layouts can sometimes look awkward.
Best Practices
- Start with unprefixed (mobile) styles and add breakpoint prefixes only where the layout truly needs to change.
- Use the browser's responsive device toolbar to test every breakpoint while developing.
- Prefer a small number of well-chosen breakpoints over overriding every single utility at every size.
- Combine responsive prefixes with flex and grid utilities for the most common layout changes.
- Keep text readable at all sizes — adjust font size and line length with responsive utilities when needed.
Frequently Asked Questions
Yes, breakpoints are fully configurable in the theme.screens section of tailwind.config.js, and you can add custom breakpoints alongside or instead of the defaults.
It means unprefixed utilities target the smallest screens by default, and each prefixed utility only overrides that style from its breakpoint upward, rather than targeting a specific range.
Tailwind does include max-* variants (for example max-md:) for the less common case where you want a style to apply below a breakpoint instead of above it.
Key Takeaways
- Tailwind is mobile-first: unprefixed utilities apply to all sizes by default.
- sm:, md:, lg:, xl:, and 2xl: apply a utility from that minimum width upward.
- Any utility class, including grid-cols-* and flex-*, can be made responsive.
- hidden combined with a responsive display utility toggles elements per breakpoint.
- Breakpoints are configurable in tailwind.config.js.
Summary
Responsive prefixes are what make Tailwind genuinely powerful for real-world interfaces, letting a single set of markup adapt smoothly from a phone screen to a widescreen monitor. Next, you will learn how to style interactive states like hover, focus, and disabled using Tailwind's state variants.