Skip to main content
Glama

MCP Tailwind Gemini Server

by Tai-DT
GitHub
TypeScript
MIT License
1
  • Apple
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

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

  1. Clone the repository:
git clone https://github.com/Tai-DT/mcp-tailwind-gemini.git cd mcp-tailwind-gemini
  1. Set up environment:
# Copy environment template cp env.example .env # Edit .env file with your API key # GEMINI_API_KEY=your_actual_api_key_here
  1. Deploy with Docker:
# Build and run production container docker-compose -f docker-compose.prod.yml up -d # Check status docker ps | grep mcp-tailwind-server

Local Development Setup

  1. Install dependencies:
npm install
  1. Build the project:
npm run build
  1. Set up environment:
# Copy environment template cp env.example .env # Edit with your API key # GEMINI_API_KEY=your_actual_api_key_here
  1. Run development server:
npm run dev

Claude Desktop Configuration

Add to your claude_desktop_config.json:

{ "mcpServers": { "tailwind-gemini": { "command": "npx", "args": ["mcp-gemini-cli", "--allow-npx"], "env": { "GEMINI_API_KEY": ""your-api-key-here" } }

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):

{ "mcpServers": { "mcp-tailwind-gemini": { "command": "npm", "args": ["run", "start"], "cwd": "/path/to/your/mcp-tailwind-gemini", "env": { "GEMINI_API_KEY": "your_gemini_api_key_here" } } } }
For Cursor IDE

Add to your ~/.cursor/mcp.json:

{ "mcpServers": { "mcp-tailwind-gemini": { "command": "node", "args": ["/path/to/your/mcp-tailwind-gemini/dist/index.js"], "env": { "GEMINI_API_KEY": "your_gemini_api_key_here" } } } }

🛠️ Available Tools

Component Generation

{ "tool": "generate_component", "description": "Create a responsive button component", "type": "button", "variant": "primary", "size": "lg", "framework": "react", "responsive": true, "accessibility": true }

Class Optimization

{ "tool": "optimize_classes", "html": "<div class=\"p-4 px-4 py-4 text-blue-500 text-blue-600\">Content</div>", "removeRedundant": true, "mergeConflicts": true }

Theme Creation

{ "tool": "create_theme", "brandColor": "#3B82F6", "style": "modern", "colorCount": 9, "includeConfig": true }

Design Analysis

{ "tool": "analyze_design", "html": "<div>...</div>", "checkAccessibility": true, "checkResponsive": true, "checkPerformance": true }

Preview Generation

{ "tool": "generate_preview", "html": "<button class=\"bg-blue-500 text-white px-4 py-2 rounded\">Button</button>", "width": 800, "height": 600 }

CSS Conversion

{ "tool": "convert_to_tailwind", "code": ".button { padding: 1rem; background: #3B82F6; }", "format": "css", "optimize": true }

AI Suggestions

{ "tool": "suggest_improvements", "html": "<div>...</div>", "context": "E-commerce product card", "focusAreas": ["accessibility", "performance", "ux"] }

Layout Generation

{ "tool": "create_layout", "type": "dashboard", "sections": ["header", "sidebar", "main", "footer"], "complexity": "medium", "framework": "react" }

🎯 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

// Convert HTML component to any framework { "tool": "generate_component", "description": "Modern button component", "framework": "react", // or "vue", "svelte", "angular" "typescript": true, "features": ["loading-state", "variant-support"] }

Universal Project Generation

// Create full-stack project with any tech stack { "tool": "create_project", "name": "My App", "framework": "react", "buildTool": "vite", // or "webpack", "nextjs", "nuxt" "features": ["typescript", "tailwind", "testing", "deployment"] }

Platform Integration

# VS Code Extension code --install-extension tailwind-mcp-assistant # WebStorm Plugin # Install from JetBrains Marketplace: "Tailwind MCP Assistant" # Figma Plugin # Search "Tailwind MCP" in Figma Community # CLI Tool npm install -g tailwind-mcp-cli tmcp generate --framework react --description "Product card" # Browser Extension # Install from Chrome Web Store: "Tailwind MCP Assistant"

Cross-Platform Workflow

# 1. Design in Figma → Extract with plugin # 2. Convert to multiple frameworks tmcp convert --from figma --to react,vue,svelte # 3. Generate optimized projects tmcp create-project --framework react --build vite tmcp create-project --framework vue --build nuxt # 4. Deploy to multiple platforms tmcp deploy --platforms vercel,netlify,aws

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

# Development mode with hot reload npm run dev # Build for production npm run build # Start production server npm start

Testing MCP Server

  1. Test with echo command:
echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/list"}' | node dist/index.js
  1. Test with a simple tool call:
echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/call", "params": {"name": "generate_component", "arguments": {"description": "A simple button", "type": "button"}}}' | node dist/index.js
  1. Test with environment variable:
GEMINI_API_KEY="your_key" node dist/index.js

Environment Variables

  • GEMINI_API_KEY: Your Google Gemini API key (optional)
  • NODE_ENV: Environment mode (development/production)

Project Structure

src/ ├── index.ts # Main MCP server ├── tools/ # MCP tool implementations │ ├── component-generator.ts │ ├── class-optimizer.ts │ ├── theme-creator.ts │ ├── design-analyzer.ts │ ├── preview-generator.ts │ ├── css-converter.ts │ ├── ai-suggestions.ts │ └── layout-generator.ts └── utils/ └── gemini.ts # Gemini AI integration

🤝 Contributing

We welcome contributions! Please see our contributing guidelines for details.

Development Setup

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Add tests if applicable
  5. Submit a pull request

📄 License

MIT License - see LICENSE file for details.

🐳 Docker Deployment

Quick Docker Setup

# Build production image docker build -f Dockerfile.runtime -t mcp-tailwind-runtime:latest . # Run container docker run -d \ --name mcp-tailwind-server \ --env-file .env \ --restart unless-stopped \ mcp-tailwind-runtime:latest
# Start production stack docker-compose -f docker-compose.prod.yml up -d # View logs docker-compose -f docker-compose.prod.yml logs -f # Stop services docker-compose -f docker-compose.prod.yml down

Security Best Practices

  1. Environment Variables:
    # Use .env file (never commit to Git) cp env.example .env # Edit .env with your actual API key
  2. Container 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:latest
  3. Network 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

  1. MCP Server not starting:
    • Ensure you've run npm run build first
    • Check that dist/index.js exists
    • Verify Node.js version is 18+
  2. Gemini API errors:
    • Set your GEMINI_API_KEY environment variable
    • Verify the API key is valid and has proper permissions
    • Check your internet connection
  3. 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-server
  4. Claude Desktop not connecting:
    • Restart Claude Desktop after updating config
    • Check the config file path is correct
    • Verify JSON syntax is valid
  5. Build errors:
    # Clean and rebuild rm -rf dist/ node_modules/ npm install npm run build

Debug Mode

# Run with debug logging DEBUG=mcp:* node dist/index.js # Docker debug docker run -it --rm \ --env-file .env \ mcp-tailwind-runtime:latest npm run dev

🙋‍♂️ Support

Built with ❤️ for the Tailwind CSS and AI community

Install Server
A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Tools

View all 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.

  1. 🌟 Features
    1. 🤖 AI-Powered Design
    2. 🎨 Tailwind CSS Tools
    3. 🌐 Cross-Platform Integration
    4. 🚀 Advanced Capabilities
  2. 📦 Installation
    1. Prerequisites
    2. Quick Start with Docker
    3. Local Development Setup
    4. Claude Desktop Configuration
  3. 🛠️ Available Tools
    1. Component Generation
    2. Class Optimization
    3. Theme Creation
    4. Design Analysis
    5. Preview Generation
    6. CSS Conversion
    7. AI Suggestions
    8. Layout Generation
  4. 🎯 Use Cases
    1. Creating Components
    2. Design Optimization
    3. Theme Development
  5. 🌐 Cross-Platform Usage
    1. Multi-Framework Development
    2. Universal Project Generation
    3. Platform Integration
    4. Cross-Platform Workflow
    5. Code Migration
  6. 🔧 Development
    1. Running Locally
    2. Testing MCP Server
    3. Environment Variables
    4. Project Structure
  7. 🤝 Contributing
    1. Development Setup
  8. 📄 License
    1. 🐳 Docker Deployment
      1. Quick Docker Setup
      2. Docker Compose (Recommended)
      3. Security Best Practices
    2. 🔧 Troubleshooting
      1. Common Issues
      2. Debug Mode
    3. 🙋‍♂️ Support

      Related Resources

      Related MCP Servers

      • Kontxt MCP Server

        ReyNeill
        -
        security
        F
        license
        -
        quality
        A 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 -
        9
        Python

      • MCP with Gemini Integration

        ImDPS
        -
        security
        F
        license
        -
        quality
        Implements a Model Control Protocol server integrated with Google Gemini LLM, providing a flexible framework for building AI-powered applications.
        Last updated -
        Python
        • Linux

      • AI Studio MCP Server

        eternnoir
        -
        security
        F
        license
        -
        quality
        A Model Context Protocol server that connects to Google AI Studio/Gemini API, enabling content generation with support for various file types, conversation history, and system prompts.
        Last updated -
        521
        12
        JavaScript

      • Gemini MCP Tool

        jamubc
        A
        security
        F
        license
        A
        quality
        A 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 -
        4
        2,194
        749
        TypeScript
        • Apple
        • Linux

      View all related MCP servers

      New MCP Servers

      MCP directory API

      We provide all the information about MCP servers via our MCP API.

      curl -X GET 'https://glama.ai/api/mcp/v1/servers/Tai-DT/mcp-tailwind-gemini'

      If you have feedback or need assistance with the MCP directory API, please join our Discord server