Tailwind to NativeWind
Converts Tailwind CSS components to NativeWind 4 syntax for React Native development. Helps migrate web components to mobile apps.
Transforms Tailwind components to NativeWind 4 for React Native.
What it does
- Transform individual Tailwind components to NativeWind
- Convert entire directories of components at once
- Analyze existing components for Tailwind usage patterns
Best for
About Tailwind to NativeWind
Tailwind to NativeWind is a community-built MCP server published by tokenizin-agency that provides AI assistants with tools and capabilities via the Model Context Protocol. Easily convert Tailwind components to NativeWind 4 for React Native projects with Tailwind to NativeWind. Simplify your development workflow today. It is categorized under developer tools.
How to install
You can install Tailwind to NativeWind in your AI client of choice. Use the install panel on this page to get one-click setup for Cursor, Claude Desktop, VS Code, and other MCP-compatible clients. This server runs locally on your machine via the stdio transport.
License
Tailwind to NativeWind is released under the MIT license. This is a permissive open-source license, meaning you can freely use, modify, and distribute the software.
@modelcontextprotocol/server-nativewind
MCP server for transforming Tailwind components to NativeWind 4.
Installation
npm install -g @modelcontextprotocol/server-nativewind
Usage
As a CLI tool
mcp-nativewind
In 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 install - Build the project:
npm run build - Run tests:
npm test
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
MIT
Alternatives
Related Skills
Browse all skillsTechnical workflow for implementing accessible React user interfaces with shadcn/ui, Tailwind CSS, and TanStack Query. Includes 6-phase process with mandatory Style Guide compliance, Context7 best practices consultation, Chrome DevTools validation, and WCAG 2.1 AA accessibility standards. Use after Test Agent, Implementer, and Supabase agents complete their work.
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.
Answer questions about the AI SDK and help build AI-powered features. Use when developers: (1) Ask about AI SDK functions like generateText, streamText, ToolLoopAgent, embed, or tools, (2) Want to build AI agents, chatbots, RAG systems, or text generation features, (3) Have questions about AI providers (OpenAI, Anthropic, Google, etc.), streaming, tool calling, structured output, or embeddings, (4) Use React hooks like useChat or useCompletion. Triggers on: "AI SDK", "Vercel AI SDK", "generateText", "streamText", "add AI to my app", "build an agent", "tool calling", "structured output", "useChat".
Guide for building TypeScript CLIs with Bun. Use when creating command-line tools, adding subcommands to existing CLIs, or building developer tooling. Covers argument parsing, subcommand patterns, output formatting, and distribution.
Guide developers through setting up development environments with proper tools, dependencies, and configurations