Supports creating Angular components with Tailwind CSS styling and converting designs between frameworks
Provides browser extension integration for Tailwind assistance via the Chrome Web Store
Provides design-to-code conversion from Figma designs to Tailwind CSS components across frameworks
Utilizes Gemini AI for intelligent component generation, design analysis, and optimization of Tailwind CSS code
Enables deployment of Tailwind CSS projects to Netlify
Supports generating Next.js projects with integrated Tailwind CSS configuration
Allows creating Nuxt.js projects with pre-configured Tailwind CSS integration
Integrates with OpenAI services for enhanced AI capabilities in Tailwind component design and optimization
Supports generating Tailwind components in React with options for TypeScript integration, state management, and conversion between frameworks
Allows generating Tailwind components in Svelte and supports cross-framework component conversion
Core integration providing comprehensive Tailwind CSS tools for component generation, class optimization, and theme creation
Supports deploying Tailwind CSS projects directly to Vercel platform
Provides integration with Vite build tool for project generation with Tailwind CSS configuration
Enables project setup with Webpack bundler configured for Tailwind CSS
Offers integration with WebStorm IDE through plugins for Tailwind CSS assistance
MCP Tailwind Gemini Server
Advanced Model Context Protocol (MCP) server for Tailwind CSS with Gemini AI integration and cross-platform support for intelligent design assistance across all major development environments.
š Features
š¤ AI-Powered Design
Intelligent Component Generation: Create sophisticated Tailwind components using Gemini AI
Smart Optimization: AI-driven class optimization and conflict resolution
Design Analysis: Comprehensive design quality assessment with improvement suggestions
Theme Creation: Generate cohesive design systems with AI assistance
šØ Tailwind CSS Tools
Component Generator: Create buttons, cards, forms, navigation, modals, and custom components
Class Optimizer: Clean up redundant classes and resolve conflicts
CSS Converter: Transform existing CSS/SCSS to Tailwind classes
Layout Generator: Build responsive layouts for dashboards, landing pages, blogs, and more
Theme Creator: Generate custom color palettes, typography, and design tokens
Preview Generator: Visual component previews with screenshot capability
š Cross-Platform Integration
Multi-Framework Support: React, Vue, Svelte, Angular with automatic component conversion
Build Tool Integration: Vite, Webpack, Next.js, Nuxt, SvelteKit project generation
IDE Extensions: VS Code, WebStorm plugins with live assistance
Design Tool Sync: Figma plugin for design-to-code conversion
Universal Deployment: CLI tools, browser extensions, and API integrations
š Advanced Capabilities
Framework Adapters: Automatic component conversion between frameworks
Universal Project Generation: Create full-stack applications with any tech stack
Multi-Platform Deployment: Deploy to development environments, production, and design tools
External API Integration: Gemini, OpenAI, Claude, Figma for enhanced AI capabilities
Responsive Design: Mobile-first approach with breakpoint optimization
Accessibility: WCAG compliance checking and enhancement suggestions
Performance: Bundle size optimization and render performance analysis
Visual Preview: Screenshot generation for component visualization
š¦ Installation
Prerequisites
Node.js 18 or higher
npm or yarn package manager
Docker (for containerized deployment)
(Optional) Gemini API key for AI features
Quick Start with Docker
Clone the repository:
Set up environment:
Deploy with Docker:
Local Development Setup
Install dependencies:
Build the project:
Set up environment:
Run development server:
Claude Desktop Configuration
Add to your claude_desktop_config.json
:
Config File Locations:
macOS:
~/Library/Application Support/Claude/claude_desktop_config.json
Windows:
%APPDATA%\\Claude\\claude_desktop_config.json
Linux:
~/.config/Claude/claude_desktop_config.json
Alternative Configuration (using npm):
For Cursor IDE
Add to your ~/.cursor/mcp.json
:
š ļø Available Tools
Component Generation
Class Optimization
Theme Creation
Design Analysis
Preview Generation
CSS Conversion
AI Suggestions
Layout Generation
šÆ Use Cases
Creating Components
Generate production-ready components with AI assistance:
Modern button variants with accessibility features
Responsive card layouts with proper spacing
Form components with validation styling
Navigation menus with mobile-first design
Design Optimization
Improve existing designs with intelligent analysis:
Remove redundant Tailwind classes
Resolve conflicting utility classes
Optimize for performance and maintainability
Enhance accessibility compliance
Theme Development
Build comprehensive design systems:
Generate cohesive color palettes
Create typography scales
Design spacing systems
Export Tailwind configuration files
š Cross-Platform Usage
Multi-Framework Development
Universal Project Generation
Platform Integration
Cross-Platform Workflow
Code Migration
Convert existing CSS to Tailwind:
Transform legacy CSS to utility classes
Migrate from other frameworks
Optimize class usage patterns
Maintain visual consistency
š§ Development
Running Locally
Testing MCP Server
Test with echo command:
Test with a simple tool call:
Test with environment variable:
Environment Variables
GEMINI_API_KEY
: Your Google Gemini API key (optional)NODE_ENV
: Environment mode (development/production)
Project Structure
š¤ Contributing
We welcome contributions! Please see our contributing guidelines for details.
Development Setup
Fork the repository
Create a feature branch
Make your changes
Add tests if applicable
Submit a pull request
š License
MIT License - see LICENSE file for details.
š³ Docker Deployment
Quick Docker Setup
Docker Compose (Recommended)
Security Best Practices
Environment Variables:
# Use .env file (never commit to Git) cp env.example .env # Edit .env with your actual API keyContainer Security:
# Run with resource limits docker run -d \ --name mcp-tailwind-server \ --env-file .env \ --memory=512m \ --cpus=1.0 \ --restart unless-stopped \ mcp-tailwind-runtime:latestNetwork Isolation:
# Create isolated network docker network create mcp-network # Run with custom network docker run -d \ --name mcp-tailwind-server \ --network mcp-network \ --env-file .env \ --restart unless-stopped \ mcp-tailwind-runtime:latest
For detailed Docker and security guide, see DOCKER-SECURITY-GUIDE.md.
š§ Troubleshooting
Common Issues
MCP Server not starting:
Ensure you've run
npm run build
firstCheck that
dist/index.js
existsVerify Node.js version is 18+
Gemini API errors:
Set your
GEMINI_API_KEY
environment variableVerify the API key is valid and has proper permissions
Check your internet connection
Docker container issues:
# Check container logs docker logs mcp-tailwind-server # Verify environment docker exec mcp-tailwind-server env | grep GEMINI # Restart container docker restart mcp-tailwind-serverClaude Desktop not connecting:
Restart Claude Desktop after updating config
Check the config file path is correct
Verify JSON syntax is valid
Build errors:
# Clean and rebuild rm -rf dist/ node_modules/ npm install npm run build
Debug Mode
šāāļø Support
Issues: GitHub Issues
Documentation: Check the examples in this README
Discussions: GitHub Discussions
Built with ā¤ļø for the Tailwind CSS and AI community
hybrid server
The server is able to function both locally and remotely, depending on the configuration or use case.
Tools
Advanced Model Context Protocol server that integrates Gemini AI with Tailwind CSS, providing intelligent component generation, class optimization, and cross-platform design assistance across major development environments.
- š Features
- š¦ Installation
- š ļø Available Tools
- šÆ Use Cases
- š Cross-Platform Usage
- š§ Development
- š¤ Contributing
- š License
- š³ Docker Deployment
- š§ Troubleshooting
- šāāļø Support
Related Resources
Related MCP Servers
- -securityFlicense-qualityA Model Context Protocol server that connects AI clients to local code repositories, using Gemini 2.0 Flash to analyze codebases and generate targeted context based on user queries.Last updated -10
- -securityFlicense-qualityImplements a Model Control Protocol server integrated with Google Gemini LLM, providing a flexible framework for building AI-powered applications.Last updated -
- AsecurityFlicenseAqualityA Model Context Protocol server that enables AI assistants to interact with Google Gemini CLI, allowing them to leverage Gemini's large token window for analyzing files and codebases using natural language commands.Last updated -640,5691,425
- AsecurityAlicenseAqualityA Model Context Protocol server that exposes OpenAI and Gemini AI models through a single interface, allowing tools like Claude Code and Cursor to access multiple AI providers with built-in usage analytics.Last updated -23217242MIT License