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

Use these tools for dynamic, up-to-date Tailwind information:

### `mcp__tailwindcss__search_tailwind_docs`

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

**Examples:**
- "How do I use dark mode in Tailwind?"
- "What are container queries?"
- "How do responsive breakpoints work?"

### `mcp__tailwindcss__get_tailwind_utilities`

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

**Examples:**
- "What utilities are available for flexbox?"
- "Show me spacing utilities"
- "What text alignment classes exist?"

### `mcp__tailwindcss__get_tailwind_colors`

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

**Examples:**
- "What colors are available?"
- "Show me the blue palette shades"
- "How do I use custom colors?"

### `mcp__tailwindcss__convert_css_to_tailwind`

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

**Examples:**
- "Convert this CSS to Tailwind: display: flex; justify-content: center;"
- "What's the Tailwind equivalent of margin: 0 auto?"

### `mcp__tailwindcss__generate_component_template`

Use when user needs a component template with Tailwind styling.

**Examples:**
- "Generate a button component"
- "Create a card template"
- "Show me a navbar example"

---

## Official Documentation URLs

When MCP tools are unavailable, use WebFetch with these URLs to get current documentation:

### Getting Started
| Topic | URL |
|-------|-----|
| Installation | https://tailwindcss.com/docs/installation |
| Using Vite | https://tailwindcss.com/docs/installation/using-vite |
| Using PostCSS | https://tailwindcss.com/docs/installation/using-postcss |
| Tailwind CLI | https://tailwindcss.com/docs/installation/tailwind-cli |
| Editor Setup | https://tailwindcss.com/docs/editor-setup |
| Upgrade Guide | http