🎨 Tailwind MCP Server

The first and most comprehensive Model Context Protocol (MCP) server for Tailwind CSS

Generate components • Optimize classes • Create themes • Get best practices

Installation • Features • Usage • Examples • Contributing

🚀 Features

🎯 Component Generation

Generate production-ready Tailwind components with variants, sizes, and framework support

• UI Elements: buttons, cards, modals, alerts, badges, dropdowns, tooltips
• Navigation: navbars, sidebars, breadcrumbs, pagination, tabs
• Layout: hero sections, footers, grid layouts, flexbox patterns
• Forms: complete form components with validation styling
• Data Display: tables, accordions, progress bars

⚡ Smart Optimization

• Class Optimization: Clean up redundant classes and merge conflicts
• Validation: Validate Tailwind classes with improvement suggestions
• Performance Tips: Get guidance on bundle size and optimization

📱 Layout Systems

• Responsive Layouts: Mobile-first flexbox, grid, and dashboard layouts
• Design Patterns: Blog, e-commerce, landing page, and dashboard templates
• Breakpoint Strategies: Comprehensive responsive design guidance

🎨 Theme Creation

• Color Palettes: Generate cohesive color systems from brand colors
• Typography: Create consistent font scales and hierarchy
• Design Systems: Complete theme generation with spacing, shadows, borders
• Configuration: Export themes as tailwind.config.js files

🔧 Developer Tools

• CSS Conversion: Transform existing CSS to Tailwind classes
• Configuration Generation: Create framework-specific Tailwind configs
• Best Practices: Get guidance on accessibility, performance, maintainability
• Plugin Recommendations: Suggestions based on your project needs

🌐 Framework Support

• HTML - Pure HTML with Tailwind classes
• React - JSX components with TypeScript support
• Vue - Vue.js single file components
• Svelte - Svelte component format
• Angular - Angular template format

📦 Installation

NPM Installation

npm install -g tailwind-mcp-server

Manual Installation

git clone https://github.com/yourusername/tailwind-mcp-server.git
cd tailwind-mcp-server
npm install

⚙️ Configuration

Claude Desktop Setup

Add to your claude_desktop_config.json:

Option 1: Global Installation (Recommended)

{
  "mcpServers": {
    "tailwind-mcp-server": {
      "command": "npx",
      "args": ["tailwind-mcp-server"]
    }
  }
}

Option 2: Manual Installation

{
  "mcpServers": {
    "tailwind-mcp-server": {
      "command": "node",
      "args": ["/path/to/tailwind-mcp-server/src/server.js"]
    }
  }
}

Config File Locations:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json

🛠️ Available Tools

📚 Usage Examples

🔲 Generate a Modern Button

{
  "component_type": "button",
  "variant": "primary",
  "size": "lg",
  "responsive": true,
  "dark_mode": true,
  "framework": "react"
}

Output:

const Button = ({ children, onClick, disabled = false }) => {
  return (

      {children}

  );
};

🎨 Create a Color Theme

{
  "theme_type": "colors",
  "style": "modern",
  "brand_color": "#6366F1",
  "color_count": 9,
  "include_config": true
}

📱 Generate Responsive Layout

{
  "layout_type": "dashboard",
  "complexity": "medium",
  "responsive": true,
  "content_areas": ["header", "sidebar", "main", "footer"]
}

⚡ Optimize Classes

{
  "classes": "p-4 px-4 py-4 text-blue-500 text-blue-600 flex flex-row",
  "merge_conflicts": true,
  "remove_redundant": true,
  "suggest_alternatives": true
}

Output:

{
  "optimized_classes": "p-4 text-blue-600 flex",
  "removed_redundant": ["px-4", "py-4", "text-blue-500", "flex-row"],
  "suggestions": ["Consider using 'space-x-*' for gap between flex items"]
}

🎯 Component Showcase

Buttons

• Variants: primary, secondary, outline, ghost, link
• Sizes: xs, sm, md, lg, xl
• States: hover, focus, active, disabled
• Features: loading states, icon support, responsive sizing

Cards

• Types: basic, elevated, outlined, interactive
• Features: headers, footers, media support, hover effects
• Layouts: vertical, horizontal, grid arrangements

Navigation

• Components: navbar, sidebar, breadcrumbs, pagination
• Features: mobile-responsive, dropdown menus, active states
• Accessibility: keyboard navigation, ARIA labels

Forms

• Elements: inputs, selects, textareas, checkboxes, radios
• Features: validation states, help text, floating labels
• Layouts: inline, stacked, grid arrangements

🏗️ Layout Examples

Dashboard Layout

Hero Section

        Beautiful Tailwind Components


        Generate, optimize, and perfect your Tailwind CSS with AI assistance

🎨 Theme Examples

Modern Color Palette

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a',
        }
      }
    }
  }
}

Typography Scale

fontSize: {
  'xs': ['0.75rem', { lineHeight: '1rem' }],
  'sm': ['0.875rem', { lineHeight: '1.25rem' }],
  'base': ['1rem', { lineHeight: '1.5rem' }],
  'lg': ['1.125rem', { lineHeight: '1.75rem' }],
  'xl': ['1.25rem', { lineHeight: '1.75rem' }],
  '2xl': ['1.5rem', { lineHeight: '2rem' }],
  '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
  '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
}

📋 Best Practices

Performance

• Purge unused classes with proper content configuration
• Use @apply directive sparingly for maintainability
• Optimize for production with minification and compression
• Leverage JIT mode for faster builds and smaller bundles

Responsive Design

• Mobile-first approach with progressive enhancement
• Consistent breakpoints across the design system
• Touch-friendly targets (minimum 44px touch targets)
• Flexible grid systems for various content types

Accessibility

• Semantic HTML structure with proper headings
• Color contrast meeting WCAG guidelines
• Keyboard navigation support for all interactive elements
• Screen reader compatibility with proper ARIA labels

Maintainability

• Component-based architecture for reusability
• Design tokens for consistent theming
• Documentation for custom utilities and components
• Version control for configuration changes

🔌 Plugin Recommendations

Essential Plugins

• @tailwindcss/forms - Better form styling
• @tailwindcss/typography - Rich content styling
• @tailwindcss/aspect-ratio - Responsive media

Specialized Plugins

• @tailwindcss/line-clamp - Text truncation
• tailwindcss-animate - Animation utilities
• @tailwindcss/container-queries - Container-based responsive design

🤝 Contributing

We welcome contributions! Here's how to get started:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes and add tests if applicable
4. Commit your changes: git commit -m 'Add amazing feature'
5. Push to the branch: git push origin feature/amazing-feature
6. Open a Pull Request

Development Setup

git clone https://github.com/yourusername/tailwind-mcp-server.git
cd tailwind-mcp-server
npm install
npm run dev

Areas for Contribution

• Additional component types
• More layout patterns
• Enhanced optimization algorithms
• Better CSS-to-Tailwind conversion
• Extended theme generation
• More framework support

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙋‍♂️ Support

• Documentation: Check our examples directory
• Issues: GitHub Issues
• Discussions: GitHub Discussions

🌟 Show Your Support

If this project helps you, please consider:

• ⭐ Starring the repository
• 🐛 Reporting bugs or requesting features
• 🤝 Contributing to the codebase
• 📢 Sharing with other developers

Built with ❤️ for the Tailwind CSS community