TailwindCSS MCP Server

TailwindCSS MCP Server

A comprehensive Model Context Protocol (MCP) server that provides TailwindCSS utilities, documentation, conversion tools, and template generation capabilities. This server enables AI assistants to help with TailwindCSS development through intelligent tooling and real-time assistance.

🚀 Features

Information Tools (4 tools)

• get_tailwind_utilities - Retrieve TailwindCSS utility classes by category, property, or search
• get_tailwind_colors - Access the complete TailwindCSS color palette with all shades
• get_tailwind_config_guide - Get configuration guides for different frameworks
• search_tailwind_docs - Search TailwindCSS documentation with intelligent filtering

Action Tools (4 tools)

• install_tailwind - Generate installation commands and configurations for any framework
• convert_css_to_tailwind - Convert traditional CSS to TailwindCSS utility classes
• generate_color_palette - Create custom color palettes with multiple shades from base colors
• generate_component_template - Generate HTML component templates with TailwindCSS classes

Supported Frameworks

• React (Create React App, Next.js)
• Vue (Vue 3, Nuxt.js)
• Angular
• Svelte/SvelteKit
• Laravel
• Vite
• Vanilla JavaScript/HTML

📦 Installation

Using npm (Recommended)

npm install -g tailwindcss-mcp-server

Using the package directly

npx tailwindcss-mcp-server

Local Development

git clone https://github.com/CarbonoDev/tailwindcss-mcp-server.git
cd tailwindcss-mcp-server
npm install
npm run build

⚙️ Configuration

Claude Desktop

Add to your Claude Desktop configuration file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%/Claude/claude_desktop_config.json

Option 1: Using global installation

{
  "mcpServers": {
    "tailwindcss-server": {
      "command": "tailwindcss-server"
    }
  }
}

Option 2: Using npx

{
  "mcpServers": {
    "tailwindcss-server": {
      "command": "npx",
      "args": ["-y", "tailwindcss-mcp-server"]
    }
  }
}

Option 3: Using local build

{
  "mcpServers": {
    "tailwindcss-server": {
      "command": "/path/to/tailwindcss-mcp/build/index.js"
    }
  }
}

Claude Code

Add MCP Server using npx

claude mcp add tailwindcss-mcp-server -- npx tailwindcss-mcp-server

Windsurf IDE

Add to your ./windsurf/mcp_servers.json:

{
  "mcpServers": {
    "tailwindcss-server": {
      "command": "npx",
      "args": ["-y", "tailwindcss-mcp-server"]
    }
  }
}

Cursor IDE

Add to your .cursor/mcp.json:

{
  "mcpServers": {
    "tailwindcss-server": {
      "command": "npx",
      "args": ["-y", "tailwindcss-mcp-server"]
    }
  }
}

🛠️ Tool Reference

Information Tools

`get_tailwind_utilities`

Retrieve TailwindCSS utility classes with flexible filtering options.

Parameters:

• category (optional): Filter by category (e.g., 'layout', 'typography', 'colors')
• property (optional): Filter by CSS property (e.g., 'margin', 'color', 'font-size')
• search (optional): Search term to find specific utilities

Example Usage:

// Get all layout utilities
get_tailwind_utilities({ category: "layout" })

// Get margin-related utilities
get_tailwind_utilities({ property: "margin" })

// Search for flex utilities
get_tailwind_utilities({ search: "flex" })

`get_tailwind_colors`

Access TailwindCSS color palette with complete shade information.

Parameters:

• colorName (optional): Specific color name (e.g., 'blue', 'red')
• includeShades (optional): Include all color shades (default: true)

Example Usage:

// Get all colors with shades
get_tailwind_colors({ includeShades: true })

// Get specific color information
get_tailwind_colors({ colorName: "blue" })

`get_tailwind_config_guide`

Get configuration guides and best practices for different frameworks.

Parameters:

• topic (optional): Configuration topic (e.g., 'installation', 'customization')
• framework (optional): Target framework (e.g., 'react', 'vue', 'nextjs')

Example Usage:

// Get React-specific configuration
get_tailwind_config_guide({ framework: "react" })

// Get customization guides
get_tailwind_config_guide({ topic: "customization" })

`search_tailwind_docs`

Search TailwindCSS documentation with intelligent filtering.

Parameters:

• query (required): Search query for TailwindCSS documentation
• category (optional): Filter by documentation category
• limit (optional): Limit number of results (default: 10)

Example Usage:

// Search for responsive design information
search_tailwind_docs({
  query: "responsive design",
  limit: 5
})

// Search in specific category
search_tailwind_docs({
  query: "dark mode",
  category: "cus