React 19 + Next.js 16 + Tailwind CSS Best Practices

Comprehensive strict-rules reference for web apps built on React 19, the Next.js 16 App Router, and Tailwind CSS 4. Contains 34 rules across 6 categories. Each rule is stated as an Always/Never directive with a quantified impact, an incorrect example, and a correct example.

Stack Contract

All guidance assumes:

• React 19 with Server Components by default; Client Components only when interactivity is required ('use client' at the top)
• Next.js 16 App Router with app/ directory, layout.tsx, page.tsx, loading.tsx, error.tsx, not-found.tsx, parallel routes, intercepting routes
• Server Actions for mutations ('use server') — never useEffect for data fetching
• Tailwind CSS 4 with the @theme directive, dark: variant, container queries, and the standard 4pt spacing scale
• lucide-react as the canonical icon system
• No CSS-in-JS (no styled-components, no emotion) — Tailwind utility classes only, with cn() from clsx + tailwind-merge for conditional classes
• shadcn/ui primitives (Radix-based) preferred for dialogs, popovers, dropdowns, tooltips, toasts

When to Apply

Reference these rules when: