Mcp Nativewind
What is Mcp Nativewind
mcp-nativewind is an MCP server designed to transform Tailwind components into NativeWind 4 components, facilitating the integration of Tailwind CSS with NativeWind.
Use cases
Use cases include transforming existing Tailwind components for use in React Native applications, analyzing Tailwind usage for optimization, and batch processing multiple components for efficient development.
How to use
To use mcp-nativewind, install it globally via npm with the command ‘npm install -g @modelcontextprotocol/server-nativewind’. It can be used as a CLI tool by running ‘mcp-nativewind’ or integrated into Claude for Desktop by adding it to the configuration file.
Key features
Key features include the ability to transform a single component, transform all components in a directory, and analyze Tailwind usage within components.
Where to use
mcp-nativewind can be used in web development projects that utilize Tailwind CSS and require conversion to NativeWind for better compatibility with React Native applications.
Clients Supporting MCP
The following are the main client software that supports the Model Context Protocol. Click the link to visit the official website for more information.
Overview
What is Mcp Nativewind
mcp-nativewind is an MCP server designed to transform Tailwind components into NativeWind 4 components, facilitating the integration of Tailwind CSS with NativeWind.
Use cases
Use cases include transforming existing Tailwind components for use in React Native applications, analyzing Tailwind usage for optimization, and batch processing multiple components for efficient development.
How to use
To use mcp-nativewind, install it globally via npm with the command ‘npm install -g @modelcontextprotocol/server-nativewind’. It can be used as a CLI tool by running ‘mcp-nativewind’ or integrated into Claude for Desktop by adding it to the configuration file.
Key features
Key features include the ability to transform a single component, transform all components in a directory, and analyze Tailwind usage within components.
Where to use
mcp-nativewind can be used in web development projects that utilize Tailwind CSS and require conversion to NativeWind for better compatibility with React Native applications.
Clients Supporting MCP
The following are the main client software that supports the Model Context Protocol. Click the link to visit the official website for more information.
Content
@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
Dev Tools Supporting MCP
The following are the main code editors that support the Model Context Protocol. Click the link to visit the official website for more information.
