Tailwindcss MCP Server

Unclaimed

by CarbonoDev

MCP server for TailwindCSS utility classes, documentation, and project assistance

Install

$npx tailwindcss-mcp-server

Unclaimed listing

Is this your MCP server?

This listing was auto-indexed from the public record. Claim it to edit the page, set compatibility and unlock growth tools. Takes under two minutes.

Claim this server

Tools (28)

baseColor

(required): Base color in hex, rgb, or hsl format

colorName

(optional): Specific color name (e.g., 'blue', 'red')

componentType

(required): Component type ('button', 'card', 'form', 'navbar', 'modal', 'alert', 'badge', 'breadcrumb')

convert_css_to_tailwind

Convert traditional CSS to TailwindCSS utility classes with intelligent suggestions.

css

(required): CSS code to convert to TailwindCSS utilities

darkMode

(optional): Include dark mode support (default: false)

framework

(optional): Target framework (e.g., 'react', 'vue', 'nextjs')

generate_color_palette

Create custom color palettes with multiple shades from a base color.

generate_component_template

Generate HTML component templates with TailwindCSS classes and customization suggestions.

get_tailwind_colors

Access TailwindCSS color palette with complete shade information.

get_tailwind_config_guide

Get configuration guides and best practices for different frameworks.

get_tailwind_utilities

Retrieve TailwindCSS utility classes with flexible filtering options.

includeShades

(optional): Include all color shades (default: true)

includeTypescript

(optional): Include TypeScript configuration (default: false)

install_tailwind

Generate complete installation commands and configuration files for any framework.

limit

(optional): Limit number of results (default: 10)

mode

(optional): Output format ('classes', 'inline', 'component') - default: 'classes'

name

(required): Name for the color palette

packageManager

(optional): Package manager ('npm', 'yarn', 'pnpm', 'bun') - default: 'npm'

property

(optional): Filter by CSS property (e.g., 'margin', 'color', 'font-size')

query

(required): Search query for TailwindCSS documentation

responsive

(optional): Include responsive design classes (default: true)

search

(optional): Search term to find specific utilities

search_tailwind_docs

Search TailwindCSS documentation with intelligent filtering.

shades

(optional): Array of shade values (default: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950])

style

(optional): Visual style ('minimal', 'modern', 'playful') - default: 'modern'

topic

(optional): Configuration topic (e.g., 'installation', 'customization')