tailwind-css-patterns

name	tailwind-css-patterns
description	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.
allowed-tools	Read, Write, Edit, Glob, Grep, Bash

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