Tailwind CSS Patterns (v4 - 2025)

Modern utility-first CSS with CSS-native configuration.

1. Tailwind v4 Architecture

What Changed from v3

tailwind.config.js

@theme

@apply

v4 Core Concepts

--*

2. CSS-Based Configuration

Theme Definition

@theme {
  /* Colors - use semantic names */
  --color-primary: oklch(0.7 0.15 250);
  --color-surface: oklch(0.98 0 0);
  --color-surface-dark: oklch(0.15 0 0);
  
  /* Spacing scale */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  
  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

When to Extend vs Override

3. Container Queries (v4 Native)

Breakpoint vs Container

md:

@container

Container Query Usage

@container

@sm:

@md:

@lg:

@container/card

When to Use

4. Responsive Design

Breakpoint System

sm:

md:

lg:

xl:

2xl:

Mobile-First Principle

1. Write mobile styles first (no prefix)
2. Add larger screen overrides with prefixes
3. Example:

   w-full md:w-1/2 lg:w-1/3

5. Dark Mode

Configuration Strategies

class

.dark

media

selector

Dark Mode Pattern

bg-white

dark:bg-zinc-900

text-zinc-900

dark:text-zinc-100

border-zinc-200

dark:border-zinc-700

6. Modern Layout Patterns

Flexbox Patterns

flex items-center justify-center

flex flex-col gap-4

flex gap-4

flex justify-between items-center

flex flex-wrap gap-4

Grid Patterns

grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))]

grid grid-cols-3 grid-rows-2

grid grid-cols-[auto_1fr]

Note: Prefer asymmetric/Bento layouts over symmetric 3-column grids.

7. Modern Color System

OKLCH vs RGB/HSL

Color Token Architecture

--blue-500

--color-primary

--button-bg

8. Typography System

Font Stack Pattern

'Inter', 'SF Pro', system-ui, sans-serif

'JetBrains Mono', 'Fira Code', monospace

'Outfit', 'Poppins', sans-serif

Type Scale

text-xs

text-sm

text-base

text-lg

text-xl

9. Animation & Transitions

Built-in Animations

animate-spin

animate-ping

animate-pulse

animate-bounce

Transition Patterns

transition-all duration-200

transition-colors duration-150

ease-out

ease-in-out

hover:scale-105 transition-transform

10. Component Extraction

When to Extract

Extraction Methods

11. Anti-Patterns

!important

style=

@apply

12. Performance Principles

Remember: Tailwind v4 is CSS-first. Embrace CSS variables, container queries, and native features. The config file is now optional.