Set up Tailwind CSS MCP in Claude Desktop

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

Locate the config file

Claude Desktop reads MCP server configuration from the following file:

~/Library/Application Support/Claude/claude_desktop_config.json

Create this file if it does not already exist.

Add the following to your Claude Desktop 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 Desktop. 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.