TailwindPlus MCP Server

An MCP (Model Context Protocol) server for TailwindPlus UI components.

Quick Start

1. Obtain a TailwindPlus components JSON file using the TailwindPlus Downloader.

2. Install uv for uvx.

3. Add to Claude Code:

claude mcp add tailwindplus uvx -- git+https://git@github.com/richardkmichael/mcp-tailwindplus@latest --tailwindplus-data /path/to/tailwindplus-components.json

4. Store your TailwindPlus settings in Claude's memory. This teaches Claude to use the tool and resource filters properly.

Shared config (team)

Add with project scope and set env MCP_TAILWINDPLUS_DATA=/path/to/tailwindplus-components.json:

claude mcp add -s project tailwindplus uvx -- git+https://git@github.com/richardkmichael/mcp-tailwindplus@latest

This will allow .mcp.json to be commited to the repository, and but different component files can be used if necessary.

# Use TailwindPlus react for TailwindCSS v4
  ⎿  Got it.

Other clients

To configure it in another MCP client:

{
  "mcpServers": {
    "tailwindplus": {
      "command": "uvx",
      "args": [
        "git+https://github.com/richardkmichael/mcp-tailwindplus@latest",
        "--tailwindplus-data",
        "/path/to/tailwindplus-components.json"
      ]
    }
  }
}

Or, to run directly:

uvx git+https://github.com/richardkmichael/mcp-tailwindplus@latest --tailwindplus-data /path/to/tailwindplus-components.json

Claude Desktop

Claude Desktop requires HTTPS for HTTP-based MCP servers and does not permit localhost URLs. Use ngrok to expose the server:

# Terminal 1: start the MCP server over HTTP
mcp-tailwindplus --transport http

# Terminal 2: tunnel via ngrok (terminates TLS at its edge)
ngrok http 8000

Then add the ngrok URL (https://<id>.ngrok-free.app/mcp) as a custom connector in Claude Desktop (Settings > Connectors > Add custom connector).

ngrok handles TLS termination, so the MCP server itself runs plain HTTP.

Claude Desktop also supports MCP Apps, which renders component previews visually in the conversation (rather than returning raw HTML). This activates automatically when using the get_component_preview_by_full_name tool.

Tips

The TailwindPlus components JSON file has a version.

To perform future markup maintenance easily, tell Claude to add the component name and version as a comment in source code.

// Start: Application UI > Forms > Input Groups > Input with leading icon | v.2025-07-15-002529

// code

// End: Application UI > Forms > Input Groups > Input with leading icon | v.2025-07-15-002529

Example usage

Ask for UI:

> I need a simple one-line search input to put in the app header.

 mcp-tailwindplus - Get Component by Full Name (MCP)(full_name: "Application UI.Forms.Input Groups.Input with leading icon", framework: "react", tailwind_version: "4")
  ⎿  {
       "version": "2025-07-14-204017",
       "full_name": "Application UI.Forms.Input Groups.Input with leading icon",
     … +15 lines (ctrl+r to expand)

 mcp-tailwindplus - Get Component by Full Name (MCP)(full_name: "Application UI.Forms.Input Groups.Input with keyboard shortcut", framework: "react", tailwind_version: "4")
  ⎿  {
       "version": "2025-07-14-204017",
       "full_name": "Application UI.Forms.Input Groups.Input with keyboard shortcut",
     … +16 lines (ctrl+r to expand)


 Perfect! Here are two ideal options for a header search input:

  1. Input with Leading Icon

  Application UI.Forms.Input Groups.Input with leading icon
  - Simple search input with magnifying glass icon
  - Just swap the EnvelopeIcon for MagnifyingGlassIcon
  - Clean, compact design perfect for headers

  2. Input with Keyboard Shortcut

  Application UI.Forms.Input Groups.Input with keyboard shortcut
  - Shows "⌘K" shortcut hint
 

... [View full README on GitHub](https://github.com/richardkmichael/mcp-tailwindplus#readme)