| name | tailwind-css-patterns |
| description | 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. |
| language | html,tsx,jsx,vue,svelte |
| framework | tailwindcss |
| license | MIT |
Tailwind CSS Development Patterns
Expert guide for building modern, responsive UIs with Tailwind CSS. Covers v4.1+ (CSS-first config, custom utilities).
When to Use
- Styling React/HTML components with utility classes
- Building responsive layouts with breakpoints
- Flexbox and grid layouts, spacing, typography, colors
- Custom design systems, mobile-first, dark mode
Core Concepts
Utility-first: Apply styles in markup (e.g. bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded).
Responsive: Mobile-first breakpoints: sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px. Example: w-full md:w-1/2 lg:w-1/3.
Additional Resources
For layout utilities (flexbox, grid), spacing, typography, colors, component patterns, responsive patterns, dark mode, animations, and performance optimization, see reference.md.
