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 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.
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.
Use when working with the OpenAI API (Responses API) or OpenAI platform features (tools, streaming, Realtime API, auth, models, rate limits, MCP) and you need authoritative, up-to-date documentation (schemas, examples, limits, edge cases). Prefer the OpenAI Developer Documentation MCP server tools when available; otherwise guide the user to enable `openaiDeveloperDocs`.
Master API documentation with OpenAPI 3.1, AI-powered tools, and modern developer experience practices. Create interactive docs, generate SDKs, and build comprehensive developer portals. Use PROACTIVELY for API documentation or developer portal creation.