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
Tailwind CSS palettes (50-950) from any color, the closest Tailwind color, and Tailwind's defaults
Search and pull 500+ production-ready React + Tailwind sections and elements
Canonicalize Tailwind classes to their short form, and search LunarWerx free dev tools.
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.335 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.985 npm5MIT
- AlicenseNot gradedqualityDmaintenanceTransform Figma designs into pixel-perfect React + Tailwind components using the Model Context Protocol.1,213 npm5MIT