Tailwind CSS Development Patterns
Expert guide for building modern, responsive user interfaces with Tailwind CSS utility-first framework. Covers v4.1+ features including CSS-first configuration, custom utilities, and enhanced developer experience.
Overview
Provides actionable patterns for responsive, accessible UIs with Tailwind CSS v4.1+. Covers utility composition, dark mode, component patterns, and performance optimization.
When to Use
- Styling React/Vue/Svelte components
- Building responsive layouts and grids
- Implementing design systems
- Adding dark mode support
- Optimizing CSS workflow
Quick Reference
Responsive Breakpoints
| Prefix |
Min Width |
Description |
sm: |
640px |
Small screens |
md: |
768px |
Tablets |
lg: |
1024px |
Desktops |
xl: |
1280px |
Large screens |
2xl: |
1536px |
Extra large |
Common Patterns
<!-- Center content -->
<div class="flex items-center justify-center min-h-screen">
Content
</div>
<!-- Responsive grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- Items -->
</div>
<!-- Card component -->
<div class="bg-white rounded-lg shadow-lg p-6">
<h3 class="text-xl font-bold">Title</h3>
<p class="text-gray-600">Description</p>
</div>
Instructions
- Start Mobile-First: Write base styles for mobile, add responsive prefixes (
sm:, md:, lg:) for larger screens
- Use Design Tokens: Leverage Tailwind's spacing, color, and typography scales
- Compose Utilities: Combine multiple utilities for complex styles
- Extract Components: Create reusable component classes for repeated patterns
- Configure Theme: Customize design tokens in
tailwind.config.js or using @theme
- Verify Changes: Test at each breakpoint using DevTools responsive mode. Check for visual regressions and accessibility issues before committing.
Examples
Responsive Card Component
function ProductCard({ product }: { product: Product }) {
return (
<div className="bg-white rounded-lg shadow-lg overflow-hidden sm:flex">
<img className="h-48 w-full object-cover sm:h-auto sm:w-48" src={product.image} />
<div className="p-6">
<h3 className="text-lg font-semibold">{product.name}</h3>
<button className="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
Add to Cart
</button>
</div>
</div>
);
}
Dark Mode Toggle
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
<h1 class="dark:text-white">Title</h1>
</div>
Form Input
<input
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="you@example.com"
/>
Best Practices
- Consistent Spacing: Use Tailwind's spacing scale (4, 8, 12, 16, etc.)
- Color Palette: Stick to Tailwind's color system for consistency
- Component Extraction: Extract repeated patterns into reusable components
- Utility Composition: Prefer utility classes over
@apply for maintainability
- Semantic HTML: Use proper HTML elements with Tailwind classes
- Performance: Ensure content paths include all template files for optimal purging
- Accessibility: Include focus styles, ARIA labels, and respect user preferences (reduced-motion)
Troubleshooting
Classes Not Applying
- Check content paths: Ensure all template files are included in
content: [] in config
- Verify build: Run
npm run build to regenerate purged CSS
- Dev mode: Use
npx tailwindcss -o with --watch flag for live updates
Responsive Styles Not Working
- Order matters: Responsive prefixes must come before non-responsive (e.g.,
md:flex not flex md:flex)
- Check breakpoint values: Verify breakpoints match your design requirements
- DevTools: Use browser DevTools responsive mode to test at each breakpoint
Dark Mode Issues
- Verify config: Ensure
darkMode: 'class' or 'media' is set correctly
- Toggle implementation: Use
document.documentElement.classList.toggle('dark') for class strategy
- Initial flash: Add
dark class to <html> before body renders
Constraints and Warnings
- Class Proliferation: Long class strings reduce readability; extract into components
- Content Paths: Misconfigured paths cause classes to be purged in production
- Arbitrary Values: Use sparingly; prefer design tokens for consistency
- Specificity Issues: Avoid
@apply with complex selectors
- Dark Mode: Requires correct configuration (
class or media strategy)
- Browser Support: Check Tailwind docs for compatibility notes
References
- references/layout-patterns.md — Flexbox, grid, spacing, typography, colors
- references/component-patterns.md — Cards, navigation, forms, modals, React patterns
- references/responsive-design.md — Responsive patterns, dark mode, container queries
- references/animations.md — Transitions, transforms, built-in animations, motion preferences
- references/performance.md — Bundle optimization, CSS optimization, production builds
- references/accessibility.md — Focus management, screen readers, color contrast, ARIA
- references/configuration.md — CSS-first config, JavaScript config, plugins, presets
- references/reference.md — Additional reference materials
External Resources
1---2name: tailwind-css-patterns-23description: Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.4---5
6# Tailwind CSS Development Patterns
7
8Expert guide for building modern, responsive user interfaces with Tailwind CSS utility-first framework. Covers v4.1+ features including CSS-first configuration, custom utilities, and enhanced developer experience.
9
10## Overview
11
12Provides actionable patterns for responsive, accessible UIs with Tailwind CSS v4.1+. Covers utility composition, dark mode, component patterns, and performance optimization.
13
14## When to Use
15
16- Styling React/Vue/Svelte components
17- Building responsive layouts and grids
18- Implementing design systems
19- Adding dark mode support
20- Optimizing CSS workflow
21
22## Quick Reference
23
24### Responsive Breakpoints
25
26| Prefix | Min Width | Description |
27|--------|-----------|-------------|
28| `sm:` | 640px | Small screens |
29| `md:` | 768px | Tablets |
30| `lg:` | 1024px | Desktops |
31| `xl:` | 1280px | Large screens |
32| `2xl:` | 1536px | Extra large |
33
34### Common Patterns
35
36```html
37<!-- Center content -->
38<div class="flex items-center justify-center min-h-screen">
39 Content
40</div>
41
42<!-- Responsive grid -->
43<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
44 <!-- Items -->
45</div>
46
47<!-- Card component -->
48<div class="bg-white rounded-lg shadow-lg p-6">
49 <h3 class="text-xl font-bold">Title</h3>
50 <p class="text-gray-600">Description</p>
51</div>
52```
53
54## Instructions
55
561. **Start Mobile-First**: Write base styles for mobile, add responsive prefixes (`sm:`, `md:`, `lg:`) for larger screens
572. **Use Design Tokens**: Leverage Tailwind's spacing, color, and typography scales
583. **Compose Utilities**: Combine multiple utilities for complex styles
594. **Extract Components**: Create reusable component classes for repeated patterns
605. **Configure Theme**: Customize design tokens in `tailwind.config.js` or using `@theme`
616. **Verify Changes**: Test at each breakpoint using DevTools responsive mode. Check for visual regressions and accessibility issues before committing.
62
63## Examples
64
65### Responsive Card Component
66
67```tsx
68function ProductCard({ product }: { product: Product }) {
69 return (
70 <div className="bg-white rounded-lg shadow-lg overflow-hidden sm:flex">
71 <img className="h-48 w-full object-cover sm:h-auto sm:w-48" src={product.image} />
72 <div className="p-6">
73 <h3 className="text-lg font-semibold">{product.name}</h3>
74 <button className="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
75 Add to Cart
76 </button>
77 </div>
78 </div>
79 );
80}
81```
82
83### Dark Mode Toggle
84
85```html
86<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
87 <h1 class="dark:text-white">Title</h1>
88</div>
89```
90
91### Form Input
92
93```html
94<input
95 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
96 placeholder="you@example.com"
97/>
98```
99
100## Best Practices
101
1021. **Consistent Spacing**: Use Tailwind's spacing scale (4, 8, 12, 16, etc.)
1032. **Color Palette**: Stick to Tailwind's color system for consistency
1043. **Component Extraction**: Extract repeated patterns into reusable components
1054. **Utility Composition**: Prefer utility classes over `@apply` for maintainability
1065. **Semantic HTML**: Use proper HTML elements with Tailwind classes
1076. **Performance**: Ensure content paths include all template files for optimal purging
1087. **Accessibility**: Include focus styles, ARIA labels, and respect user preferences (reduced-motion)
109
110## Troubleshooting
111
112### Classes Not Applying
113- **Check content paths**: Ensure all template files are included in `content: []` in config
114- **Verify build**: Run `npm run build` to regenerate purged CSS
115- **Dev mode**: Use `npx tailwindcss -o` with `--watch` flag for live updates
116
117### Responsive Styles Not Working
118- **Order matters**: Responsive prefixes must come before non-responsive (e.g., `md:flex` not `flex md:flex`)
119- **Check breakpoint values**: Verify breakpoints match your design requirements
120- **DevTools**: Use browser DevTools responsive mode to test at each breakpoint
121
122### Dark Mode Issues
123- **Verify config**: Ensure `darkMode: 'class'` or `'media'` is set correctly
124- **Toggle implementation**: Use `document.documentElement.classList.toggle('dark')` for class strategy
125- **Initial flash**: Add `dark` class to `<html>` before body renders
126
127## Constraints and Warnings
128
129- **Class Proliferation**: Long class strings reduce readability; extract into components
130- **Content Paths**: Misconfigured paths cause classes to be purged in production
131- **Arbitrary Values**: Use sparingly; prefer design tokens for consistency
132- **Specificity Issues**: Avoid `@apply` with complex selectors
133- **Dark Mode**: Requires correct configuration (`class` or `media` strategy)
134- **Browser Support**: Check Tailwind docs for compatibility notes
135
136## References
137
138- **[references/layout-patterns.md](references/layout-patterns.md)** — Flexbox, grid, spacing, typography, colors
139- **[references/component-patterns.md](references/component-patterns.md)** — Cards, navigation, forms, modals, React patterns
140- **[references/responsive-design.md](references/responsive-design.md)** — Responsive patterns, dark mode, container queries
141- **[references/animations.md](references/animations.md)** — Transitions, transforms, built-in animations, motion preferences
142- **[references/performance.md](references/performance.md)** — Bundle optimization, CSS optimization, production builds
143- **[references/accessibility.md](references/accessibility.md)** — Focus management, screen readers, color contrast, ARIA
144- **[references/configuration.md](references/configuration.md)** — CSS-first config, JavaScript config, plugins, presets
145- **[references/reference.md](references/reference.md)** — Additional reference materials
146
147## External Resources
148
149- [Tailwind CSS Docs](https://tailwindcss.com/docs)
150- [Tailwind UI](https://tailwindui.com)
151- [Tailwind Play](https://play.tailwindcss.com)
majiayu000