get_tailwind_colors

MCP tool from Tailwindcss MCP Server by CarbonoDev

Access TailwindCSS color palette with complete shade information.

How to use it

get_tailwind_colors is exposed by the Tailwindcss MCP Server MCP server. Add the server to your MCP client (Claude Desktop, Cursor, Windsurf and others), and the get_tailwind_colors tool becomes available to the model automatically. See the full listing for setup details and every tool this server provides.

Install Tailwindcss MCP Server

$npx tailwindcss-mcp-server

FULL TAILWINDCSS MCP SERVER LISTING

Other tools in Tailwindcss MCP Server (27)

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

(optional): Filter by category (e.g., 'layout', 'typography', 'colors')

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

(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.

(required): CSS code to convert to TailwindCSS utilities

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

(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_config_guide

Get configuration guides and best practices for different frameworks.

get_tailwind_utilities

Retrieve TailwindCSS utility classes with flexible filtering options.

(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.

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

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

(required): Name for the color palette

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

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

(required): Search query for TailwindCSS documentation

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

(optional): Search term to find specific utilities

search_tailwind_docs

Search TailwindCSS documentation with intelligent filtering.

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

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

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