Set up Tailwind CSS MCP in Claude Code

Full Tailwind CSS v3/v4 context including utilities, config, themes, plugins, and integration guides for your AI editor.

Locate the config file

Claude Code reads MCP server configuration from the following file:

~/.claude.json

Create this file if it does not already exist.

You can configure Tailwind CSS MCP using the CLI command or by editing the config file directly.

Option A: CLI command

bash

claude mcp add tailwind-mcp -- npx -y mcp-tailwindcss

Option B: Config file

json

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

No environment variables needed. Tailwind CSS MCP works out of the box without any API keys or tokens.

Restart Claude Code. Tailwind CSS MCP should appear in your MCP server list with 4 tools available.

This server adds approximately 2,060 tokens to your context window for tool definitions.