# Gopherguides Gopher AI Tailwind Best Practices > Tailwind CSS v4 Best Practices - Skill: `tomevault-io/gopherguides-gopher-ai-tailwind-best-practices` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/gopherguides-gopher-ai-tailwind-best-practices` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/gopherguides-gopher-ai-tailwind-best-practices/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/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](https://tomevault.io/claim/gopherguides) — claim your Tome and manage your conversions.