关键词

Tailwind CSSNativeWindCSS 转换组件转换UI 开发

使用说明

项目简介

'@modelcontextprotocol/server-nativewind' 是一个基于 Model Context Protocol (MCP) 的服务器，它提供了一系列工具，帮助开发者将使用 Tailwind CSS 编写的 React 组件转换为使用 NativeWind 样式语法的组件。此外，它还提供了分析组件中 Tailwind CSS 使用情况的功能。

主要功能点

  • Tailwind to NativeWind 组件转换: 可以将单个组件或整个目录下的组件从 Tailwind CSS 转换为 NativeWind。
  • Tailwind CSS 使用分析: 可以分析组件代码，提供 Tailwind CSS 使用情况的报告。

安装步骤

  1. 确保你的系统中已安装 Node.js 和 npm。
  2. 打开终端，运行以下命令全局安装 '@modelcontextprotocol/server-nativewind'： 
    npm install -g @modelcontextprotocol/server-nativewind

服务器配置

要将此 MCP 服务器与 MCP 客户端（例如 Claude for Desktop）配合使用，你需要在客户端的配置文件中添加服务器配置信息。以下是一个配置示例，你需要将此配置添加到你的 MCP 客户端配置文件中，以便客户端能够找到并连接到此服务器。

Claude for Desktop 配置示例 (claude_desktop_config.json):

{
  "mcpServers": {
    "nativewind-transformer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-nativewind"]
    }
  }
}

配置参数说明:

  • 'server name': 'nativewind-transformer' (服务器名称，你可以自定义)
  • 'command': 'npx' (启动服务器的命令，这里使用 'npx' 来运行本地安装的 npm 包)
  • 'args': '["-y", "@modelcontextprotocol/server-nativewind"]' (传递给 'npx' 命令的参数，'-y' 表示自动确认安装包，'@modelcontextprotocol/server-nativewind' 是要执行的 npm 包名称，即 MCP 服务器的入口)

请注意，不同的 MCP 客户端可能有不同的配置文件位置和格式，请参考你使用的 MCP 客户端的文档进行配置。

基本使用方法

配置完成后，当你的 MCP 客户端（例如 Claude for Desktop）连接到此 MCP 服务器后，你就可以使用以下工具：

  1. transform-component: 转换单个组件。你需要提供组件的代码作为输入。
  2. transform-directory: 转换目录下的所有组件。你需要提供目录的路径作为输入。
  3. analyze-component: 分析组件中的 Tailwind CSS 使用情况。你需要提供组件的代码作为输入。

具体如何调用这些工具取决于你使用的 MCP 客户端的功能和界面。通常，你需要在客户端中选择相应的工具，并提供所需的参数（例如组件代码或目录路径），然后客户端会将请求发送到此 MCP 服务器进行处理，并将结果返回给你。

信息

分类

开发者工具

访问项目