tailwind-patterns

# 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
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-24">
  {/* content */}
</section>

// Card Base
<div className="bg-card text-card-foreground rounded-lg border border-border p-6">
  {/* content */}
</div>

// Button Primary
<button className="bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90 transition-colors">
  Click me
</button>

// Responsive Grid
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {/* items */}
</div>
```

---

## 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
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
```

---

## Container Patterns

### Standard Page Container

```tsx
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  {/* content */}