--- name: tailwind-patterns description: | Production-ready Tailwind CSS patterns for common website components: responsive layouts, cards, navigation, forms, buttons, and typography. Includes spacing scale, breakpoints, mobile-first patterns, and dark mode support. Use when building UI components, creating landing pages, styling forms, implementing navigation, or fixing responsive layouts. --- # Tailwind CSS Component Patterns **Status**: Production Ready ✅ **Last Updated**: 2026-01-14 **Tailwind Compatibility**: v3.x and v4.x **Source**: Production projects, shadcn/ui patterns --- ## Quick Start ### Essential Patterns ```tsx // Section Container

{/* content */}

// Card Base

{/* content */}

// Button Primary // Responsive Grid

{/* items */}

``` --- ## Spacing Scale Consistent spacing prevents design drift: | Usage | Classes | Output | |-------|---------|--------| | **Tight spacing** | `gap-2 p-2 space-y-2` | 0.5rem (8px) | | **Standard spacing** | `gap-4 p-4 space-y-4` | 1rem (16px) | | **Comfortable** | `gap-6 p-6 space-y-6` | 1.5rem (24px) | | **Loose** | `gap-8 p-8 space-y-8` | 2rem (32px) | | **Section spacing** | `py-16 sm:py-24` | 4rem/6rem (64px/96px) | **Standard Pattern**: Use increments of 4 (4, 6, 8, 12, 16, 24) --- ## Responsive Breakpoints Mobile-first approach (base styles = mobile, add larger breakpoints): | Breakpoint | Min Width | Pattern | Example | |------------|-----------|---------|---------| | **Base** | 0px | No prefix | `text-base` | | **sm** | 640px | `sm:` | `sm:text-lg` | | **md** | 768px | `md:` | `md:grid-cols-2` | | **lg** | 1024px | `lg:` | `lg:px-8` | | **xl** | 1280px | `xl:` | `xl:max-w-7xl` | | **2xl** | 1536px | `2xl:` | `2xl:text-6xl` | ```tsx // Mobile: 1 column, Tablet: 2 columns, Desktop: 3 columns

``` --- ## Container Patterns ### Standard Page Container ```tsx

{/* content */}

``` **Variations**: - `max-w-4xl` - Narrow content (blog posts) - `max-w-5xl` - Medium content - `max-w-6xl` - Wide content - `max-w-7xl` - Full width (default) ### Section Spacing ```tsx

{/* content */}

``` --- ## Card Patterns ### Basic Card ```tsx

Card Title

Card description goes here.

``` ### Feature Card with Icon ```tsx

{/* Icon */}

Feature Title

Feature description.

``` ### Pricing Card ```tsx

Pro Plan

$29/mo

For growing teams

``` See `references/card-patterns.md` for more variants. --- ## Grid Layouts ### Auto-Responsive Grid ```tsx

{items.map(item => )}

``` ### Auto-Fit Grid (Dynamic Columns) ```tsx

{/* Automatically adjusts columns based on available space */}

``` ### Masonry-Style Grid ```tsx

{items.map(item => (

))}

``` --- ## Button Patterns ```tsx // Primary // Secondary // Outline // Ghost // Destructive ``` **Size Variants**: - Small: `px-3 py-1.5 text-sm` - Default: `px-4 py-2` - Large: `px-6 py-3 text-lg` See `references/button-patterns.md` for full reference. --- ## Form Patterns ### Input Field ```tsx

``` ### Select Dropdown ```tsx ``` ### Checkbox ```tsx

I agree to the terms

``` ### Error State ```tsx

Password

Password must be at least 8 characters

``` See `references/form-patterns.md` for complete patterns. --- ## Typography Patterns ### Headings ```tsx

Page Title

Section Title

Subsection

Card Title

``` ### Body Text ```tsx

Regular paragraph text.

Larger body text with comfortable line height.

Small supporting text or captions.

``` ### Lists ```tsx

Feature one
Feature two

``` See `references/typography-patterns.md` for complete guide. --- ## Navigation Patterns ### Header with Logo ```tsx

{/* Logo */} Brand {/* Desktop Nav */}

{/* CTA */}

``` ### Footer ```tsx ``` See `references/navigation-patterns.md` for mobile menus and dropdowns. --- ## Dark Mode Support All patterns use semantic color tokens that automatically adapt: | Token | Light Mode | Dark Mode | |-------|------------|-----------| | `bg-background` | White | Dark gray | | `text-foreground` | Dark gray | White | | `bg-card` | White | Slightly lighter gray | | `text-muted-foreground` | Gray | Light gray | | `border-border` | Light gray | Dark gray | | `bg-primary` | Brand color | Lighter brand color | **Never use raw colors** like `bg-blue-500` - always use semantic tokens. See `references/dark-mode-patterns.md` for theme toggle implementation. --- ## Common Class Combinations ### Section with Heading ```tsx

Section Title

{/* content */}

``` ### Centered Content ```tsx

Centered Title

Centered description

``` ### Hover Effects ```tsx // Lift on hover

// Shadow on hover

// Color change on hover

fastapi

Scan your own AI components