mcp-nativewind
Click on "Install 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 installed
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Connectors
150+ React Native animation recipes, scene authoring, phone preview via QR, Reanimated v4 codegen
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.
On-demand drift checks: declared CSS color, radius, spacing & type vs your own tokens or a pack
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.3318MIT
- 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
- AlicenseBqualityFmaintenanceProvides comprehensive tools for TailwindCSS development including utility class retrieval, CSS-to-Tailwind conversion, and color palette generation. It enables AI assistants to search documentation, generate component templates, and provide framework-specific installation guides.81,36839MIT
- 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.91185MIT
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/tokenizin-agency/mcp-nativewind'
If you have feedback or need assistance with the MCP directory API, please join our Discord server