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.
1---2name: tailwind-css-patterns3description: 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.4language: html,tsx,jsx,vue,svelte5framework: tailwindcss6license: MIT7---89# Tailwind CSS Development Patterns1011Expert guide for building modern, responsive UIs with Tailwind CSS. Covers v4.1+ (CSS-first config, custom utilities).1213## When to Use1415- Styling React/HTML components with utility classes16- Building responsive layouts with breakpoints17- Flexbox and grid layouts, spacing, typography, colors18- Custom design systems, mobile-first, dark mode1920## Core Concepts2122**Utility-first:** Apply styles in markup (e.g. `bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded`).2324**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`.2526## Additional Resources2728For layout utilities (flexbox, grid), spacing, typography, colors, component patterns, responsive patterns, dark mode, animations, and performance optimization, see [reference.md](reference.md).
ihj04982