mcpField
T
tailwind-best-practices

tailwind-best-practices

github.com/gopherguidesDesign & UI2137 installsUpdated 1w ago
Repository

About tailwind-best-practices

tailwind-best-practices is a development skill for Tailwind CSS v4 users. It combines documentation lookup with guidance on v4 syntax, best practices, and common pitfalls.

Key features

  1. 01Search Tailwind documentation
  2. 02Find utility classes by CSS property
  3. 03Convert CSS to Tailwind utilities
  4. 04Generate Tailwind component templates
  5. 05Reference v4 syntax and practices

Use cases

  1. 01Check how a Tailwind feature works
  2. 02Convert existing CSS into utility classes
  3. 03Generate a Tailwind-styled component
  4. 04Review common v4 migration mistakes

MCP support

The skill uses MCP tools to search Tailwind documentation, find utilities and colors, convert CSS, and generate component templates.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/gopherguides/gopher-ai --skill tailwind-best-practices

After installing, type/tailwind-best-practicesin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

anti-patterns.md
best-practices.md
docs-urls.md
quick-reference.md
v4-syntax.md

Details

From the project README

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

Comments

Markdown supported