Tailwind CSS v4 Best Practices

You have access to up-to-date Tailwind CSS documentation via MCP tools. Use these tools to provide accurate, current information.

Available MCP Tools

mcp__tailwindcss__search_tailwind_docs

Use when user asks about any Tailwind feature, utility, or concept.

mcp__tailwindcss__get_tailwind_utilities

Use when user needs utility classes for a specific CSS property.

mcp__tailwindcss__get_tailwind_colors

Use when user asks about colors, palettes, or color-related utilities.

mcp__tailwindcss__convert_css_to_tailwind

Use when user has CSS they want to convert to Tailwind utility classes.

mcp__tailwindcss__generate_component_template

Use when user needs a component template with Tailwind styling.

---

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 MCP tools are unavailable.

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, @variant dark for dark mode, @layer components for extraction, @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