Gopherguides Gopher AI Tailwind Best Practices

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

Converted and distributed by TomeVault — claim your Tome and manage your conversions.