tailwind-css-patterns

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.