Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From tailwind
Provides Tailwind CSS v4 best practices: CSS-to-utility conversion, theme/color configuration, dark mode, responsive breakpoints, accessibility (focus-visible/ring), and v3-to-v4 migration.
npx claudepluginhub gopherguides/gopher-ai --plugin tailwindHow this skill is triggered — by the user, by Claude, or both
Slash command
/tailwind:tailwind-best-practicesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
You have access to up-to-date Tailwind CSS documentation via MCP tools. Use these tools to provide accurate, current information.
Tailwind CSS v4 utility-first discipline: CSS-first configuration, design tokens via @theme, and principled class composition. Invoke whenever task involves any interaction with Tailwind CSS — writing, reviewing, refactoring, debugging, or understanding utility classes, theme configuration, custom utilities, dark mode, or Tailwind integration with frameworks.
Guides Tailwind v4 CSS-first configuration, container queries, and responsive design patterns. Useful for upgrading from v3 or adopting CSS-native theme tokens.
References Tailwind CSS v4.1 core features including @theme namespaces, directives (@utility, @variant), CSS-first config, custom styles, and v3 to v4 migration guide with breaking changes.
Share bugs, ideas, or general feedback.
You have access to up-to-date Tailwind CSS documentation via MCP tools. Use these tools to provide accurate, current information.
mcp__tailwindcss__search_tailwind_docsUse when user asks about any Tailwind feature, utility, or concept.
mcp__tailwindcss__get_tailwind_utilitiesUse when user needs utility classes for a specific CSS property.
mcp__tailwindcss__get_tailwind_colorsUse when user asks about colors, palettes, or color-related utilities.
mcp__tailwindcss__convert_css_to_tailwindUse when user has CSS they want to convert to Tailwind utility classes.
mcp__tailwindcss__generate_component_templateUse when user needs a component template with Tailwind styling.
Read the relevant file for detailed patterns, code examples, and documentation URLs:
docs-urls.md — Official Documentation URLsURL 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 SyntaxCRITICAL: 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 PracticesClass 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-Patternsv3 → v4 migration table (tailwind.config.js → @theme, @tailwind → @import, etc.), common mistakes (inline styles, px values, duplicate/conflicting utilities).
quick-reference.md — Quick ReferenceResponse 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