MCP Tailwind Gemini Server

MCP Tailwind Gemini - AI-powered CSS generation and framework integration tool

typescript

12

GitHub Stars

typescript

Language

6 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "tai-dt-mcp-tailwind-gemini": {
      "command": "npx",
      "args": [
        "mcp-gemini-cli",
        "--allow-npx"
      ],
      "env": {
        "GEMINI_API_KEY": "your_api_key_here"
      }
    }
  }
}

You are equipped with an MCP server that leverages Gemini AI to help you design, generate, and optimize Tailwind CSS components across multiple frameworks. It provides cross-platform integration, intelligent design analysis, and seamless project generation to boost your development workflow.

How to use

You interact with the Tailwind Gemini MCP server through your MCP client or integrated tooling. Use it to generate responsive, accessible Tailwind components, optimize class usage, convert existing CSS to Tailwind, and scaffold full projects across React, Vue, Svelte, and Angular. You can request design analyses, theme creation, layout generation, previews, and cross-framework adaptations. The server acts as a centralized AI-driven assistant that helps you accelerate design-to-code workflows, ensure accessibility, and optimize performance.

How to install

Prerequisites you need before installing the server are Node.js 18 or higher and npm or yarn as your package manager. You may also choose to run containerized deployments with Docker, and include a Gemini API key if you want access to AI features.

Step-by-step setup for local development and deployment is shown below. Follow the commands exactly as written to ensure a smooth setup.

Step 1: Install dependencies for local development.

npm install

Step 2: Build the project.

npm run build

Step 3: Set up environment variables. Copy the example environment file and add your Gemini API key if you have one.

# Copy environment template
cp env.example .env

# Edit .env with your API key
# GEMINI_API_KEY=your_actual_api_key_here

Step 4: Run the development server.

npm run dev

Additional setup for containerized deployment and external tooling

If you prefer containerized deployment, you can build and run using Docker. A production-ready stack can be started with the provided docker-compose configuration.

docker-compose -f docker-compose.prod.yml up -d

Available tools

generate_component

Create a responsive Tailwind component with framework-appropriate structure (e.g., React, Vue, Svelte, Angular) and accessibility considerations.

optimize_classes

Remove redundant Tailwind classes, merge conflicting utilities, and improve overall class usage for performance and maintainability.

create_theme

Generate a cohesive design system with color palettes, typography scales, and design tokens.

analyze_design

Analyze HTML/CSS for accessibility, responsiveness, and performance, and provide improvement suggestions.

generate_preview

Render visual previews of components with configurable dimensions to verify layout and styling.

convert_to_tailwind

Convert existing CSS/SCSS to Tailwind utility classes with optional optimization.

suggest_improvements

Offer AI-driven recommendations focusing on accessibility, performance, and user experience in a given design context.

create_layout

Generate responsive layouts (e.g., dashboard, landing page) across frameworks with configurable sections.