mcp-nativewind
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@mcp-nativewindtransform this button component to use NativeWind 4"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
@modelcontextprotocol/server-nativewind
MCP server for transforming Tailwind components to NativeWind 4.
Installation
npm install -g @modelcontextprotocol/server-nativewindRelated MCP server: MCP Figma to React Converter
Usage
As a CLI tool
mcp-nativewindIn Claude for Desktop
Add to your claude_desktop_config.json:
{
"mcpServers": {
"nativewind-transformer": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-nativewind"]
}
}
}Available Tools
transform-component: Transform a single component
transform-directory: Transform all components in a directory
analyze-component: Analyze Tailwind usage
Development
Clone the repository
Install dependencies:
npm installBuild the project:
npm run buildRun tests:
npm test
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
MIT
This server cannot be deployed
Maintenance
Related MCP Connectors
150+ React Native animation recipes, scene authoring, phone preview via QR, Reanimated v4 codegen
Search and pull 500+ production-ready React + Tailwind sections and elements
Canonicalize Tailwind classes to their short form, and search LunarWerx free dev tools.
Search Tailwind CSS and React themes, read their tokens and source files, and get download URLs.
Related MCP Servers
- AlicenseCqualityDmaintenanceConverts Figma designs to React Native components, allowing users to extract components from Figma designs and generate corresponding React Native components with proper typing and styling.321 npm8MIT
- AlicenseNot gradedqualityDmaintenanceConverts Figma designs into React components with TypeScript and Tailwind CSS by extracting components from Figma files and transforming them into ready-to-use code.77MIT
- AlicenseAqualityBmaintenanceTranslates design tokens across platforms — extracts from Tailwind/CSS/Figma and generates native themes for Material 3, SwiftUI, and CSS variables with WCAG contrast validation.979 npm5MIT
- AlicenseNot gradedqualityDmaintenanceTransform Figma designs into pixel-perfect React + Tailwind components using the Model Context Protocol.1,030 npm5MIT