CSS & Responsive Design

Mobile-first CSS architecture for production web applications. Covers responsive strategy, Tailwind CSS v4 patterns, and performance optimization.

For design tokens and visual hierarchy, see /ux-design. For React component patterns, see /react. For project-specific breakpoints and Tailwind configuration, check the project's CLAUDE.md.

1. Mobile-First Philosophy

Base styles target mobile (the smallest viewport). Layer complexity upward with min-width breakpoints:

/* Base: mobile */
.card { padding: 1rem; }