1# Tailwind CSS Responsive Design
2 
3Mobile-first breakpoints, responsive utilities, and adaptive layouts.
4 
5## Mobile-First Approach
6 
7Tailwind uses mobile-first responsive design. Base styles apply to all screen sizes, then use breakpoint prefixes to override at larger sizes.
8 
9```html
10<!-- Base: 1 column (mobile)
11     sm: 2 columns (tablet)
12     lg: 4 columns (desktop) -->
13<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
14  <div>Item 1</div>
15  <div>Item 2</div>
16  <div>Item 3</div>
17  <div>Item 4</div>
18</div>
19```
20 
21## Breakpoint System
22 
23**Default breakpoints:**
24 
25| Prefix | Min Width | CSS Media Query |
26|--------|-----------|-----------------|
27| `sm:` | 640px | `@media (min-width: 640px)` |
28| `md:` | 768px | `@media (min-width: 768px)` |
29| `lg:` | 1024px | `@media (min-width: 1024px)` |
30| `xl:` | 1280px | `@media (min-width: 1280px)` |
31| `2xl:` | 1536px | `@media (min-width: 1536px)` |
32 
33## Responsive Patterns
34 
35### Layout Changes
36 
37```html
38<!-- Vertical on mobile, horizontal on desktop -->
39<div class="flex flex-col lg:flex-row gap-4">
40  <div>Left</div>
41  <div>Right</div>
42</div>
43 
44<!-- 1 column -> 2 columns -> 3 columns -->
45<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
46  <div>Item 1</div>
47  <div>Item 2</div>
48  <div>Item 3</div>
49</div>
50```
51 
52### Visibility
53 
54```html
55<!-- Hide on mobile, show on desktop -->
56<div class="hidden lg:block">
57  Desktop only content
58</div>
59 
60<!-- Show on mobile, hide on desktop -->
61<div class="block lg:hidden">
62  Mobile only content
63</div>
64 
65<!-- Different content per breakpoint -->
66<div class="lg:hidden">Mobile menu</div>
67<div class="hidden lg:flex">Desktop navigation</div>
68```
69 
70### Typography
71 
72```html
73<!-- Responsive text sizes -->
74<h1 class="text-2xl md:text-4xl lg:text-6xl font-bold">
75  Heading scales with screen size
76</h1>
77 
78<p class="text-sm md:text-base lg:text-lg">
79  Body text scales appropriately
80</p>
81```
82 
83### Spacing
84 
85```html
86<!-- Responsive padding -->
87<div class="p-4 md:p-6 lg:p-8">
88  More padding on larger screens
89</div>
90 
91<!-- Responsive gap -->
92<div class="flex gap-2 md:gap-4 lg:gap-6">
93  <div>Item 1</div>
94  <div>Item 2</div>
95</div>
96```
97 
98### Width
99 
100```html
101<!-- Full width on mobile, constrained on desktop -->
102<div class="w-full lg:w-1/2 xl:w-1/3">
103  Responsive width
104</div>
105 
106<!-- Responsive max-width -->
107<div class="max-w-sm md:max-w-2xl lg:max-w-4xl mx-auto">
108  Centered with responsive max width
109</div>
110```
111 
112## Common Responsive Layouts
113 
114### Sidebar Layout
115 
116```html
117<div class="flex flex-col lg:flex-row min-h-screen">
118  <!-- Sidebar: Full width on mobile, fixed on desktop -->
119  <aside class="w-full lg:w-64 bg-gray-100 p-4">
120    Sidebar
121  </aside>
122 
123  <!-- Main content -->
124  <main class="flex-1 p-4 md:p-8">
125    Main content
126  </main>
127</div>
128```
129 
130### Card Grid
131 
132```html
133<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
134  <div class="bg-white rounded-lg shadow p-6">Card 1</div>
135  <div class="bg-white rounded-lg shadow p-6">Card 2</div>
136  <div class="bg-white rounded-lg shadow p-6">Card 3</div>
137  <div class="bg-white rounded-lg shadow p-6">Card 4</div>
138</div>
139```
140 
141### Hero Section
142 
143```html
144<section class="py-12 md:py-20 lg:py-32">
145  <div class="container mx-auto px-4">
146    <div class="flex flex-col lg:flex-row items-center gap-8 lg:gap-12">
147      <div class="flex-1 text-center lg:text-left">
148        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4">
149          Hero Title
150        </h1>
151        <p class="text-lg md:text-xl mb-6">
152          Hero description
153        </p>
154        <button class="px-6 py-3 md:px-8 md:py-4">
155          CTA Button
156        </button>
157      </div>
158      <div class="flex-1">
159        <img src="hero.jpg" class="w-full rounded-lg" />
160      </div>
161    </div>
162  </div>
163</section>
164```
165 
166### Navigation
167 
168```html
169<nav class="bg-white shadow">
170  <div class="container mx-auto px-4">
171    <div class="flex items-center justify-between h-16">
172      <div class="text-xl font-bold">Logo</div>
173 
174      <!-- Desktop navigation -->
175      <div class="hidden md:flex gap-6">
176        <a href="#">Home</a>
177        <a href="#">About</a>
178        <a href="#">Services</a>
179        <a href="#">Contact</a>
180      </div>
181 
182      <!-- Mobile menu button -->
183      <button class="md:hidden">
184        <svg class="w-6 h-6">...</svg>
185      </button>
186    </div>
187  </div>
188</nav>
189```
190 
191## Max-Width Queries
192 
193Apply styles only below certain breakpoint using `max-*:` prefix:
194 
195```html
196<!-- Only on mobile and tablet (below 1024px) -->
197<div class="max-lg:text-center">
198  Centered on mobile/tablet, left-aligned on desktop
199</div>
200 
201<!-- Only on mobile (below 640px) -->
202<div class="max-sm:hidden">
203  Hidden only on mobile
204</div>
205```
206 
207Available: `max-sm:` `max-md:` `max-lg:` `max-xl:` `max-2xl:`
208 
209## Range Queries
210 
211Apply styles between breakpoints:
212 
213```html
214<!-- Only on tablets (between md and lg) -->
215<div class="md:block lg:hidden">
216  Visible only on tablets
217</div>
218 
219<!-- Between sm and xl -->
220<div class="sm:grid-cols-2 xl:grid-cols-4">
221  2 columns on tablet, 4 on extra large
222</div>
223```
224 
225## Container Queries
226 
227Style elements based on parent container width:
228 
229```html
230<div class="@container">
231  <div class="@md:grid-cols-2 @lg:grid-cols-3">
232    Responds to parent width, not viewport
233  </div>
234</div>
235```
236 
237Container query breakpoints: `@sm:` `@md:` `@lg:` `@xl:` `@2xl:`
238 
239## Custom Breakpoints
240 
241Define custom breakpoints in theme:
242 
243```css
244@theme {
245  --breakpoint-3xl: 120rem;  /* 1920px */
246  --breakpoint-tablet: 48rem;  /* 768px */
247}
248```
249 
250```html
251<div class="tablet:grid-cols-2 3xl:grid-cols-6">
252  Uses custom breakpoints
253</div>
254```
255 
256## Responsive State Variants
257 
258Combine responsive with hover/focus:
259 
260```html
261<!-- Hover effect only on desktop -->
262<button class="lg:hover:scale-105">
263  Scale on hover (desktop only)
264</button>
265 
266<!-- Different hover colors per breakpoint -->
267<a class="hover:text-blue-600 lg:hover:text-purple-600">
268  Link
269</a>
270```
271 
272## Best Practices
273 
274### 1. Mobile-First Design
275 
276Start with mobile styles, add complexity at larger breakpoints:
277 
278```html
279<!-- Good: Mobile first -->
280<div class="text-base md:text-lg lg:text-xl">
281 
282<!-- Avoid: Desktop first -->
283<div class="text-xl lg:text-base">
284```
285 
286### 2. Consistent Breakpoint Usage
287 
288Use same breakpoints across related elements:
289 
290```html
291<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8">
292  Spacing scales with layout
293</div>
294```
295 
296### 3. Test at Breakpoint Boundaries
297 
298Test at exact breakpoint widths (640px, 768px, 1024px, etc.) to catch edge cases.
299 
300### 4. Use Container for Content Width
301 
302```html
303<div class="container mx-auto px-4 sm:px-6 lg:px-8">
304  <div class="max-w-7xl">
305    Content with consistent max width
306  </div>
307</div>
308```
309 
310### 5. Progressive Enhancement
311 
312Ensure core functionality works on mobile, enhance for larger screens:
313 
314```html
315<!-- Core layout works on mobile -->
316<div class="p-4">
317  <!-- Enhanced spacing on desktop -->
318  <div class="lg:p-8">
319    Content
320  </div>
321</div>
322```
323 
324### 6. Avoid Too Many Breakpoints
325 
326Use 2-3 breakpoints per element for maintainability:
327 
328```html
329<!-- Good: 2 breakpoints -->
330<div class="grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
331 
332<!-- Avoid: Too many breakpoints -->
333<div class="grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6">
334```
335 
336## Common Responsive Utilities
337 
338### Responsive Display
339 
340```html
341<div class="block md:flex lg:grid">
342  Changes display type per breakpoint
343</div>
344```
345 
346### Responsive Position
347 
348```html
349<div class="relative lg:absolute">
350  Positioned differently per breakpoint
351</div>
352```
353 
354### Responsive Order
355 
356```html
357<div class="flex flex-col">
358  <div class="order-2 lg:order-1">First on desktop</div>
359  <div class="order-1 lg:order-2">First on mobile</div>
360</div>
361```
362 
363### Responsive Overflow
364 
365```html
366<div class="overflow-auto lg:overflow-visible">
367  Scrollable on mobile, expanded on desktop
368</div>
369```
370 
371## Testing Checklist
372 
373- [ ] Test at 320px (small mobile)
374- [ ] Test at 640px (mobile breakpoint)
375- [ ] Test at 768px (tablet breakpoint)
376- [ ] Test at 1024px (desktop breakpoint)
377- [ ] Test at 1280px (large desktop breakpoint)
378- [ ] Test landscape orientation
379- [ ] Verify touch targets (min 44x44px)
380- [ ] Check text readability at all sizes
381- [ ] Verify navigation works on mobile
382- [ ] Test with browser zoom
383