gopherguides Tailwind CSS v4 Best Practices
Use the bundled references for Tailwind CSS v4 guidance. Consult the linked official documentation when current upstream behavior matters.
Reference Files
Read the relevant file for detailed patterns, code examples, and documentation URLs:
docs-urls.md — Official Documentation URLs
URL tables organized by category (Getting Started, Core Concepts, Layout, Spacing, Sizing, Typography, Backgrounds & Borders, Effects, Transforms & Animation, Interactivity). Use with WebFetch when current upstream behavior needs verification.
v4-syntax.md — Tailwind CSS v4 Core Syntax
CRITICAL: v4 changed significantly from v3. Covers @import "tailwindcss", @theme directive for CSS-based configuration (colors, fonts, spacing), @source for detection, class-based @custom-variant dark plus .dark selectors, @layer components for extraction, and @plugin for plugins.
best-practices.md — Best Practices
Class ordering convention (layout → spacing → sizing → typography → colors → effects → interactive), responsive design (mobile-first, breakpoint reference), component extraction rule (3+ times), theme variables over hardcoded values, accessibility (focus-visible, sr-only, contrast).
anti-patterns.md — v4 Anti-Patterns
v3 → v4 migration table (tailwind.config.js → @theme, @tailwind → @import, etc.), common mistakes (inline styles, px values, duplicate/conflicting utilities).
quick-reference.md — Quick Reference
Response guidelines for helping with Tailwind, example response flow, spacing scale table, common utility patterns (centered content, card, responsive grid, truncation, gradient, fixed header).
For the latest documentation, always refer to https://tailwindcss.com/docs