Tailwind to NativeWind MCP服务工具
Tailwind组件转NativeWind 4的MCP工具
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Tailwind to NativeWind MCP服务工具。 它的用途是：Tailwind组件转NativeWind 4的MCP工具 完整的 Skill 内容见：https://321skill.com/skills/tailwind-to-nativewind-mcp服务工具/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'把这段Tailwind按钮组件转换为NativeWind 4：<button class="bg-blue-500 text-white px-4 py-2 rounded">Click</button>'，它会生成对应的NativeWind 4样式对象和组件代码，如`<TouchableOpacity style={tw\.bg-blue-500}.concat(tw\.text-white)}>`等。
介绍
在React Native开发中，将Tailwind CSS组件手动转换为NativeWind 4不仅耗时，还容易遗漏样式细节。这个MCP工具能自动解析Tailwind类名，生成对应的NativeWind 4样式对象，大幅减少重复劳动。
你只需在支持MCP协议的环境中（如Claude、Cursor）调用该工具，传入Tailwind组件代码或HTML片段，它会返回转换后的NativeWind 4组件。整个过程无需离开编辑器，实时完成。
适合前端开发、全栈开发以及移动端开发者，尤其是正在将Web项目迁移到React Native，或使用NativeWind 4构建跨平台应用的团队。也适合那些希望保持Tailwind编写习惯，但需要输出NativeWind样式的前端程序员。
使用前请确保目标组件仅使用标准Tailwind类名，避免复杂自定义配置或嵌套逻辑。转换后建议在React Native环境中验证样式，因为部分属性（如布局、响应式）可能存在差异。
核心特点
专门针对NativeWind 4的语法和样式规则进行转换，而非通用CSS-to-RN工具，转换结果更准确、无需大量二次调整。
注意事项
不适合包含大量Tailwind自定义配置、动态类名或复杂CSS-in-JS逻辑的组件。
常见问题
支持哪些Tailwind版本？
主要支持Tailwind CSS v3的类名，与NativeWind 4的映射表匹配。
转换后还需要手动调整吗？
基础样式基本可自动转换，但部分布局属性（如flex方向）或平台特有样式可能需要微调。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tailwind-to-nativewind-mcp服务工具/raw/index.md 读取 Tailwind to NativeWind MCP服务工具 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tailwind-to-nativewind-mcp服务工具/raw/index.md（查看排版版本）