Nativewind Transformer is a tool designed to bridge the gap between Tailwind CSS and NativeWind, enabling developers to seamlessly use Tailwind-styled components in their NativeWind projects. It provides functionality to transform individual components, entire directories of components, and analyze Tailwind CSS usage, ensuring compatibility with NativeWind 4. This server can be run as a CLI tool or integrated into Claude for Desktop.
Key Features
01Transforms individual Tailwind components.
02Analyzes Tailwind CSS usage in components.
03Integration with Claude for Desktop.
04Transforms all components within a directory.
05CLI tool interface.
Use Cases
01Analyzing Tailwind CSS usage within components for optimization.
02Converting existing Tailwind CSS projects to NativeWind.
03Integrating Tailwind CSS styling into NativeWind applications.
@modelcontextprotocol/server-nativewind
MCP server for transforming Tailwind components to NativeWind 4.
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
What does Nativewind Transformer do?
It transforms Tailwind CSS components into NativeWind 4 compatible styles, making it easy to use your existing Tailwind knowledge in React Native projects.
Can I transform an entire directory of components?
Yes! The `transform-directory` tool allows you to convert all components within a specified directory at once.
What analysis tools are available?
The tool provides an `analyze-component` feature, which analyzes Tailwind CSS usage within your components, helping you understand your styling patterns.
How do I install Nativewind Transformer?
Install it globally using npm: `npm install -g @modelcontextprotocol/server-nativewind`.
Does it work with Claude for Desktop?
Yes, Nativewind Transformer can be integrated with Claude for Desktop by adding it to your `claude_desktop_config.json`.
Комментарии
Комментариев пока нет. Будьте первым.