Tailwindplus MCP Connector

TailwindPlus MCP连接器

一 MCP（模型上下文协议） 公开已下载内容的服务器 TailwindPlus 组件数据传输到人工智能助手，如Claude、Cursor和其他兼容MCP的客户端。

搜索、浏览和检索TailwindPlus UI组件，包括 应用UI, 营销，以及 电子商务 类别——HTML、React或Vue，适用于Tailwind CSS v3或v4，直接从您的AI助手获取。

______________________________________________________________________

先决条件

1. TailwindPlus组件JSON文件 --生成一个 TailwindPlus下载器 (>= 1.0.0).
2. uv --用于运行服务器的Python项目/包管理器。

______________________________________________________________________

快速开始

1.获取组件数据文件

npx github:BryantDesigns/ts-tailwindplus-downloader --output=components.json

请参阅 TailwindPlus下载器自述 有关详细的用法、身份验证和选项。

2.安装 uv

# macOS / Linux
curl -LsSf https://astral.sh/uv/install.sh | sh

# Or via Homebrew
brew install uv

3.添加到克劳德代码

claude mcp add tailwindplus -- \
  uv run --directory /path/to/tailwindplus-mcp-connector \
  tailwindplus-mcp-connector \
  --tailwindplus-data /path/to/components.json

4.将您的TailwindPlus偏好存储在内存中

告诉Claude您的项目默认值，以便它可以自动使用正确的工具参数：

# Use TailwindPlus React components for Tailwind CSS v4 in light mode.
  ⎿  Got it.

______________________________________________________________________

共享配置（团队）

添加项目范围并设置env-var，以便每个开发人员都可以指向自己的数据文件：

claude mcp add -s project tailwindplus -- \
  uv run --directory /path/to/tailwindplus-mcp-connector \
  tailwindplus-mcp-connector

然后设置 MCP_TAILWINDPLUS_DATA=/path/to/components.json 在每个开发人员的环境中。这保持 .mcp.json 可提交到仓库，同时允许每个开发人员使用不同的数据文件。

______________________________________________________________________

其他客户

JSON配置（VS代码、游标、Windsurf等）

{
  "mcpServers": {
    "tailwindplus": {
      "type": "stdio",
      "command": "uv",
      "args": [
        "run",
        "--directory", "/path/to/tailwindplus-mcp-connector",
        "tailwindplus-mcp-connector",
        "--tailwindplus-data", "/path/to/components.json"
      ]
    }
  }
}

或者使用环境变量而不是CLI标志：

{
  "mcpServers": {
    "tailwindplus": {
      "type": "stdio",
      "command": "uv",
      "args": [
        "run",
        "--directory", "/path/to/tailwindplus-mcp-connector",
        "tailwindplus-mcp-connector"
      ],
      "env": {
        "MCP_TAILWINDPLUS_DATA": "/path/to/components.json"
      }
    }
  }
}

直接运行

uv run --directory /path/to/tailwindplus-mcp-connector \
  tailwindplus-mcp-connector \
  --tailwindplus-data /path/to/components.json

环境变量

______________________________________________________________________

克劳德桌面版

Claude Desktop要求基于HTTP的MCP服务器使用HTTPS，不允许使用localhost URL。请使用 吸烟 要公开服务器，请执行以下操作：

# Terminal 1: start the MCP server over HTTP
uv run tailwindplus-mcp-connector --transport http --tailwindplus-data /path/to/components.json

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

然后添加ngrok URL(https://.ngrok-free.app/mcp)作为Claude Desktop中的自定义连接器（设置>连接器>添加自定义连接器）。

ngrok处理TLS终止，因此MCP服务器本身运行纯HTTP。

Claude Desktop还支持 MCP应用程序，它在对话中直观地呈现组件预览，而不是返回原始HTML。使用时，此功能会自动激活 get_component_preview_by_full_name 工具。

______________________________________________________________________

提示

TailwindPlus组件JSON文件有一个 版本 （下载的时间戳）。

为了使未来的标记维护更容易，请告诉Claude添加组件 名字 和 版本 作为源代码中的注释：

{/* Start: Application UI > Forms > Input Groups > Label with leading icon | v.2026-02-27-120000 */}

// ... component code ...

{/* End: Application UI > Forms > Input Groups > Label with leading icon | v.2026-02-27-120000 */}

如果在请求组件之前向代码添加版本注释，AI助手可以自动推断出正确的框架和版本：

______________________________________________________________________

示例用法

询问用户界面：

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

⏺ tailwindplus - Search Component Names (MCP)(search_term: "input")
  ⎿  [
       "Application UI.Forms.Input Groups.Input with leading icon",
       "Application UI.Forms.Input Groups.Input with keyboard shortcut",
       … +20 lines

⏺ tailwindplus - Get Component by Full Name (MCP)(
    full_name: "Application UI.Forms.Input Groups.Input with leading icon",
    framework: "react",
    tailwind_version: "4",
    mode: "light"
  )
  ⎿  { "version": "2026-02-27-120000", "full_name": "...", "code": "..." }

 Here's a search input component based on the "Input with leading icon" from
 TailwindPlus. Swap the EnvelopeIcon for MagnifyingGlassIcon and you're set.

克劳德也欣赏其他类型的指导：

# Referring to "component" means a TailwindPlus component.
  ⎿  Got it.

请求特定用例的代码：

> Show me the code for a URL input with the schema prefix, e.g. `https:// [INPUT]`

⏺ tailwindplus - Search Component Names (MCP)(search_term: "input")
  ⎿  [ ... list of matching components ... ]

⏺ tailwindplus - Get Component by Full Name (MCP)(
    full_name: "Application UI.Forms.Input Groups.Input with inline add-on",
    framework: "react",
    tailwind_version: "4",
    mode: "light"
  )
  ⎿  { "version": "2026-02-27-120000", ... }

⏺ Here's a TailwindPlus React component for URL input with "https://" prefix:
   

______________________________________________________________________

可用工具

所有工具都是 只读 和 幂等.

list_component_names

返回所有可用组件名称（点分隔路径）的排序列表。

search_component_names

按关键字搜索组件（不区分大小写的部分匹配）。

get_component_by_full_name

检索特定组件的组件代码。

get_component_preview_by_full_name

参数与 get_component_by_full_name；返回 预览HTML 而不是组件代码。在Claude Desktop中，这通过MCP Apps直观地呈现组件，而不是返回原始HTML。

list_tailwindplus_information

返回有关加载的数据文件的元数据：版本、下载日期、组件计数、下载持续时间和下载器版本。

______________________________________________________________________

可用资源

MCP资源提供对组件的直接URI访问：

例子： twplus://Application UI.Forms.Input Groups.Label with leading icon/react/4/light

注： 资源需要支持“资源模板”的MCP客户端。并非所有客户端都支持此功能。

参数

______________________________________________________________________

模式规则

模式要求是 由服务器强制执行 --无效的组合会返回描述性错误。

______________________________________________________________________

组件组织

按照TailwindPlus类别结构，使用点分隔路径对组件进行分层组织：

Application UI.Forms.Input Groups.Label with leading icon
Marketing.Sections.Heroes.With angled image on right
Ecommerce.Components.Shopping Carts.Simple

• 类别： 应用程序UI、营销、电子商务
• 全名： 点分隔路径，如 Marketing.Hero Sections.Simple centered
• 搜索： 支持部分关键字匹配--使用 search_component_names 查找组件

使用 list_component_names 浏览所有可用路径。

______________________________________________________________________

缓存管理

组件数据被解析为 SQLite缓存 在首次加载时使用，并在后续启动时重复使用。缓存由源文件的大小和修改时间决定——当数据文件发生变化时，它会自动重建。

uv run tailwindplus-mcp-connector --clear-cache   # remove all cached databases

______________________________________________________________________

数据源

此服务器需要一个TailwindPlus组件JSON文件，由 TailwindPlus下载器 (>= 1.0.0).

生成数据文件：

npx github:BryantDesigns/ts-tailwindplus-downloader --output=components.json

配置数据文件路径 通过任一方法：

• 命令行： --tailwindplus-data /path/to/components.json
• 环境： MCP_TAILWINDPLUS_DATA=/path/to/components.json

CLI标志的优先级高于环境变量。

______________________________________________________________________

发展

# Install dependencies
uv sync

# Run server locally
uv run tailwindplus-mcp-connector --tailwindplus-data /path/to/components.json

# Run tests
uv run pytest

# Format + lint (run before every commit)
uv run ruff format . && uv run ruff check . --fix

在另一个项目中运行开发版本

要在另一个项目中测试此MCP的开发版本，请添加到该项目的 .mcp.json:

claude mcp add -s project tailwindplus -- \
  uv run --directory /absolute/path/to/tailwindplus-mcp-connector \
  tailwindplus-mcp-connector

作为结果的 .mcp.json:

{
  "mcpServers": {
    "tailwindplus": {
      "type": "stdio",
      "command": "uv",
      "args": [
        "run",
        "--directory", "/absolute/path/to/tailwindplus-mcp-connector",
        "tailwindplus-mcp-connector"
      ],
      "env": {
        "MCP_TAILWINDPLUS_DATA": "/path/to/components.json"
      }
    }
  }
}

直接检查服务器

使用 MCP检查员 以交互方式执行MCP命令，查看工具/资源模式等：

MCP_TAILWINDPLUS_DATA=/path/to/components.json \
  npx @modelcontextprotocol/inspector \
  uv run tailwindplus-mcp-connector

______________________________________________________________________

致谢

受...启发 mcp顺风加 理查德·迈克尔。这是一个独立的Python/FastMCP重写，增加了模式支持和SQLite缓存。

______________________________________________________________________

许可证

麻省理工学院