Power your agent
การติดตั้งจากผู้เผยแพร่ ไม่ใช่เอนด์พอยต์ของ PlugMCP
URL แบบรีโมตหรือคำสั่งบนเครื่องของคุณ? การติดตั้งสองแบบต่างกันอย่างไร
รันบน PlugMCP
A new server you create. It is not this listing's official endpoint. Use the publisher install when you want their URL and their credentials.
เปิดจากผู้เผยแพร่
A comprehensive Model Context Protocol (MCP) server that provides TailwindCSS utilities, documentation, conversion tools, and template generation capabilities. This server enables AI assistants to help with TailwindCSS development through intelligent tooling and real-time assistance.
MCP server for TailwindCSS utility classes, documentation, and project assistance
get_tailwind_utilities - Retrieve TailwindCSS utility classes by category, property, or searchget_tailwind_colors - Access the complete TailwindCSS color palette with all shadesget_tailwind_config_guide - Get configuration guides for different frameworkssearch_tailwind_docs - Search TailwindCSS documentation with intelligent filteringinstall_tailwind - Generate installation commands and configurations for any frameworkconvert_css_to_tailwind - Convert traditional CSS to TailwindCSS utility classesgenerate_color_palette - Create custom color palettes with multiple shades from base colorsgenerate_component_template - Generate HTML component templates with TailwindCSS classesnpm install -g tailwindcss-mcp-server
npx tailwindcss-mcp-server
git clone https://github.com/CarbonoDev/tailwindcss-mcp-server.git
cd tailwindcss-mcp-server
npm install
npm run build
Add to your Claude Desktop configuration file:
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%/Claude/claude_desktop_config.json
{
"mcpServers": {
"tailwindcss-server": {
"command": "tailwindcss-server"
}
}
}
{
"mcpServers": {
"tailwindcss-server": {
"command": "npx",
"args": ["-y", "tailwindcss-mcp-server"]
}
}
}
{
"mcpServers": {
"tailwindcss-server": {
"command": "/path/to/tailwindcss-mcp/build/index.js"
}
}
}
Add MCP Server using npx
claude mcp add tailwindcss-mcp-server -- npx tailwindcss-mcp-server
Add to your ./windsurf/mcp_servers.json:
{
"mcpServers": {
"tailwindcss-server": {
"command": "npx",
"args": ["-y", "tailwindcss-mcp-server"]
}
}
}
Add to your .cursor/mcp.json:
{
"mcpServers": {
"tailwindcss-server": {
"command": "npx",
"args": ["-y", "tailwindcss-mcp-server"]
}
}
}
get_tailwind_utilitiesRetrieve TailwindCSS utility classes with flexible filtering options.
Parameters:
category (optional): Filter by category (e.g., 'layout', 'typography', 'colors')property (optional): Filter by CSS property (e.g., 'margin', 'color', 'font-size')search (optional): Search term to find specific utilitiesExample Usage:
// Get all layout utilities
get_tailwind_utilities({ category: "layout" })
// Get margin-related utilities
get_tailwind_utilities({ property: "margin" })
// Search for flex utilities
get_tailwind_utilities({ search: "flex" })
get_tailwind_colorsAccess TailwindCSS color palette with complete shade information.
Parameters:
colorName (optional): Specific color name (e.g., 'blue', 'red')includeShades (optional): Include all color shades (default: true)Example Usage:
// Get all colors with shades
get_tailwind_colors({ includeShades: true })
// Get specific color information
get_tailwind_colors({ colorName: "blue" })
get_tailwind_config_guideGet configuration guides and best practices for different frameworks.
Parameters:
topic (optional): Configuration topic (e.g., 'installation', 'customization')framework (optional): Target framework (e.g., 'react', 'vue', 'nextjs')Example Usage:
// Get React-specific configuration
get_tailwind_config_guide({ framework: "react" })
// Get customization guides
get_tailwind_config_guide({ topic: "customization" })
search_tailwind_docsSearch TailwindCSS documentation with intelligent filtering.
Parameters:
query (required): Search query for TailwindCSS documentationcategory (optional): Filter by documentation categorylimit (optional): Limit number of results (default: 10)Example Usage:
// Search for responsive design information
search_tailwind_docs({
query: "responsive design",
limit: 5
})
// Search in specific category
search_tailwind_docs({
query: "dark mode",
category: "customization"
})
install_tailwindGenerate complete installation commands and configuration files for any framework.
Parameters:
framework (required): Target framework ('react', 'nextjs', 'vue', 'vite', 'laravel', 'angular', 'svelte')packageManager (optional): Package manager ('npm', 'yarn', 'pnpm', 'bun') - default: 'npm'includeTypescript (optional): Include TypeScript configuration (default: false)Example Usage:
// Install for Next.js with npm
install_tailwind({
framework: "nextjs",
packageManager: "npm"
})
// Install for React with TypeScript and yarn
install_tailwind({
framework: "react",
packageManager: "yarn",
includeTypescript: true
})
convert_css_to_tailwindConvert traditional CSS to TailwindCSS utility classes with intelligent suggestions.
Parameters:
css (required): CSS code to convert to TailwindCSS utilitiesmode (optional): Output format ('classes', 'inline', 'component') - default: 'classes'Example Usage:
// Convert CSS to utility classes
convert_css_to_tailwind({
css: ".button { padding: 1rem; background-color: #3B82F6; color: white; }"
})
// Convert with inline format
convert_css_to_tailwind({
css: ".card { margin: 16px; border-radius: 8px; }",
mode: "inline"
})
// Convert for @apply directive
convert_css_to_tailwind({
css: ".component { display: flex; justify-content: center; }",
mode: "component"
})
generate_color_paletteCreate custom color palettes with multiple shades from a base color.
Parameters:
baseColor (required): Base color in hex, rgb, or hsl formatname (required): Name for the color paletteshades (optional): Array of shade values (default: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950])Example Usage:
// Generate brand color palette
generate_color_palette({
baseColor: "#6366F1",
name: "brand"
})
// Generate custom shades
generate_color_palette({
baseColor: "rgb(59, 130, 246)",
name: "primary",
shades: [100, 300, 500, 700, 900]
})
// Generate from HSL
generate_color_palette({
baseColor: "hsl(217, 91%, 60%)",
name: "accent"
})
generate_component_templateGenerate HTML component templates with TailwindCSS classes and customization suggestions.
Parameters:
componentType (required): Component type ('button', 'card', 'form', 'navbar', 'modal', 'alert', 'badge', 'breadcrumb')style (optional): Visual style ('minimal', 'modern', 'playful') - default: 'modern'darkMode (optional): Include dark mode support (default: false)responsive (optional): Include responsive design classes (default: true)Example Usage:
// Generate a modern button
generate_component_template({
componentType: "button",
style: "modern",
responsive: true
})
// Generate a modal with dark mode
generate_component_template({
componentType: "modal",
style: "minimal",
darkMode: true
})
// Generate a playful card component
generate_component_template({
componentType: "card",
style: "playful",
responsive: true
})
# Clone the repository
git clone https://github.com/CarbonoDev/tailwindcss-mcp-server.git
cd tailwindcss-mcp-server
# Install dependencies
npm install
# Build the project
npm run build
# Run tests
npm test
# Start development with watch mode
npm run watch
# Run all tests
npm test
# Run tests with coverage
npm run test:coverage
# Run tests in watch mode
npm run test:watch
# Run tests with UI
npm run test:ui
Use the MCP Inspector for debugging and development:
npm run inspector
This will start the inspector and provide a URL for browser-based debugging.
MIT License - see LICENSE file for details.
MCP server for TailwindCSS utility classes, documentation, and project assistance
เครื่องมือ
ยังไม่มีรายการเครื่องมือ เซิร์ฟเวอร์แบบรีโมตจะได้รายการหลังการตรวจสอบสถานะครั้งแรก
FAQ
คัดลอกคอนฟิก stdio สำหรับ Cursor, Claude Desktop, Claude Code หรือ VS Code ได้ในหน้านี้ คอนฟิกนี้ใช้การติดตั้งของผู้เผยแพร่ ไม่ใช่พร็อกซีของ PlugMCP
ระเบียนนี้ไม่ได้ระบุตัวแปรสภาพแวดล้อมที่จำเป็น
Tailwindcss ทำงานแบบโลคัลผ่าน stdio
ตรวจสอบล่าสุดเมื่อ 2026-10-28 MCP server for TailwindCSS utility classes, documentation, and project assistance
