Skip to main content
Glama
CarbonoDev

TailwindCSS MCP Server

by CarbonoDev

TailwindCSS MCP Server

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.

🚀 Features

Information Tools (4 tools)

  • get_tailwind_utilities - Retrieve TailwindCSS utility classes by category, property, or search

  • get_tailwind_colors - Access the complete TailwindCSS color palette with all shades

  • get_tailwind_config_guide - Get configuration guides for different frameworks

  • search_tailwind_docs - Search TailwindCSS documentation with intelligent filtering

Action Tools (4 tools)

  • install_tailwind - Generate installation commands and configurations for any framework

  • convert_css_to_tailwind - Convert traditional CSS to TailwindCSS utility classes

  • generate_color_palette - Create custom color palettes with multiple shades from base colors

  • generate_component_template - Generate HTML component templates with TailwindCSS classes

Supported Frameworks

  • React (Create React App, Next.js)

  • Vue (Vue 3, Nuxt.js)

  • Angular

  • Svelte/SvelteKit

  • Laravel

  • Vite

  • Vanilla JavaScript/HTML

Related MCP server: Components Build MCP

📦 Installation

npm install -g tailwindcss-mcp-server

Using the package directly

npx tailwindcss-mcp-server

Local Development

git clone https://github.com/CarbonoDev/tailwindcss-mcp-server.git
cd tailwindcss-mcp-server
npm install
npm run build

⚙️ Configuration

Claude Desktop

Add to your Claude Desktop configuration file:

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

Option 1: Using global installation

{
  "mcpServers": {
    "tailwindcss-server": {
      "command": "tailwindcss-server"
    }
  }
}

Option 2: Using npx

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

Option 3: Using local build

{
  "mcpServers": {
    "tailwindcss-server": {
      "command": "/path/to/tailwindcss-mcp/build/index.js"
    }
  }
}

Claude Code

Add MCP Server using npx

claude mcp add tailwindcss-mcp-server -- npx tailwindcss-mcp-server

Windsurf IDE

Add to your ./windsurf/mcp_servers.json:

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

Cursor IDE

Add to your .cursor/mcp.json:

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

🛠️ Tool Reference

Information Tools

get_tailwind_utilities

Retrieve 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 utilities

Example 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_colors

Access 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_guide

Get 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_docs

Search TailwindCSS documentation with intelligent filtering.

Parameters:

  • query (required): Search query for TailwindCSS documentation

  • category (optional): Filter by documentation category

  • limit (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"
})

Action Tools

install_tailwind

Generate 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_tailwind

Convert traditional CSS to TailwindCSS utility classes with intelligent suggestions.

Parameters:

  • css (required): CSS code to convert to TailwindCSS utilities

  • mode (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_palette

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

Parameters:

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

  • name (required): Name for the color palette

  • shades (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_template

Generate 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
})

🎯 Use Cases

1. Learning TailwindCSS

  • Explore utility classes by category or property

  • Understand the color system and naming conventions

  • Get configuration examples for your framework

  • Search documentation for specific concepts

2. Converting Existing CSS

  • Convert legacy CSS to modern TailwindCSS utilities

  • Get suggestions for unsupported properties

  • Learn TailwindCSS equivalents for common CSS patterns

  • Optimize existing stylesheets

3. Design System Creation

  • Generate custom color palettes that match your brand

  • Create consistent component templates

  • Export color variables for CSS or JavaScript

  • Maintain design consistency across projects

4. Framework Integration

  • Get framework-specific installation guides

  • Set up TailwindCSS with TypeScript support

  • Configure build tools and development workflows

  • Learn best practices for your tech stack

🔧 Development

Prerequisites

  • Node.js 18+

  • npm, yarn, or pnpm

Setup

# 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

Testing

# 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

Debugging

Use the MCP Inspector for debugging and development:

npm run inspector

This will start the inspector and provide a URL for browser-based debugging.

📊 Server Capabilities

  • Real-time Documentation: Access up-to-date TailwindCSS documentation

  • Intelligent Conversion: Convert CSS to TailwindCSS with accuracy and suggestions

  • Framework Integration: Support for all major frontend frameworks

  • Color Management: Advanced color palette generation with shade variants

  • Template Generation: Ready-to-use component templates with customization options

  • Performance Optimized: Efficient caching and service architecture

  • Error Handling: Comprehensive error handling with helpful messages

  • Type Safety: Full TypeScript implementation with proper typing

🤝 Contributing

  1. Fork the repository

  2. Create a feature branch

  3. Make your changes with tests

  4. Ensure all tests pass

  5. Submit a pull request

📄 License

MIT License - see LICENSE file for details.

Available Tools

8 tools
convert_css_to_tailwindB

Convert traditional CSS to TailwindCSS utility classes

ParametersJSON Schema
NameRequiredDescriptionDefault
cssYesCSS code to convert to TailwindCSS utilities
modeNoOutput format: 'classes' for space-separated utilities, 'inline' for class attribute, 'component' for @apply directive (default: classes)

TDQS

B3.3/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries full burden but lacks behavioral details. It doesn't disclose whether this is a read-only transformation or has side effects, error handling, performance characteristics, or output format beyond what's implied by parameters. For a conversion tool with zero annotation coverage, this is insufficient.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence with zero waste—front-loaded and exactly conveys the core purpose without unnecessary elaboration. Every word earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given 2 parameters with full schema coverage and no output schema, the description is minimally complete for a conversion tool but lacks context on behavioral traits due to no annotations. It's adequate but has clear gaps in usage and transparency.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so parameters are fully documented in the schema. The description adds no additional meaning beyond implying conversion, which aligns with the schema. Baseline 3 is appropriate when the schema does the heavy lifting.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the specific action ('Convert') and target resources ('traditional CSS to TailwindCSS utility classes'), distinguishing it from sibling tools that generate palettes, templates, colors, configs, utilities, install, or search docs. It precisely defines the transformation being performed.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives like 'get_tailwind_utilities' or 'generate_component_template', nor does it mention prerequisites or context for conversion. It states what the tool does but not when it's appropriate.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

generate_color_paletteC

Generate a custom color palette with multiple shades from a base color

ParametersJSON Schema
NameRequiredDescriptionDefault
baseColorYesBase color in hex, rgb, or hsl format (e.g., '#3B82F6', 'rgb(59, 130, 246)')
nameYesName for the color palette (e.g., 'brand', 'accent')
shadesNoArray of shade values to generate (default: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950])

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden of behavioral disclosure. It mentions generating a palette but does not specify output format (e.g., JSON, array), whether the operation is idempotent, potential rate limits, or error conditions. For a tool with no annotation coverage, this leaves significant gaps in understanding its behavior beyond the basic action.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that directly states the tool's purpose without any unnecessary words or fluff. It is front-loaded with the core action, making it easy to parse and understand quickly, which is ideal for conciseness.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the lack of annotations and output schema, the description is incomplete for effective tool use. It does not explain what the output looks like (e.g., format, structure), potential side effects, or error handling, which are critical for an AI agent to invoke the tool correctly without additional context.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the input schema fully documents all parameters (baseColor, name, shades) with clear descriptions. The description adds minimal value beyond the schema, as it only reiterates the concept of generating shades from a base color without providing additional semantic context or examples not already covered.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb ('generate') and resource ('custom color palette with multiple shades from a base color'), making the purpose immediately understandable. However, it does not explicitly differentiate this tool from sibling tools like 'get_tailwind_colors', which might also involve color retrieval or generation, leaving some ambiguity about when to choose one over the other.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives, such as 'get_tailwind_colors' or 'convert_css_to_tailwind'. It lacks context about prerequisites, typical use cases, or any exclusions, leaving the agent to infer usage based solely on the tool name and description without explicit direction.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

generate_component_templateC

Generate HTML component templates with TailwindCSS classes

ParametersJSON Schema
NameRequiredDescriptionDefault
componentTypeYesType of component to generate (e.g., 'button', 'card', 'form', 'navbar', 'modal', 'alert', 'badge', 'breadcrumb')
styleNoVisual style of the component (default: modern)
darkModeNoInclude dark mode support (default: false)
responsiveNoInclude responsive design classes (default: true)

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden of behavioral disclosure. It states the tool generates templates but doesn't cover aspects like whether it's a read-only operation, if it requires authentication, rate limits, or what the output looks like (e.g., HTML code). This leaves significant gaps for a tool that likely produces code.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that directly states the tool's purpose without any fluff. It's front-loaded and appropriately sized, making it easy to parse quickly.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the complexity of generating code templates, lack of annotations, and no output schema, the description is incomplete. It doesn't explain the output format, potential errors, or behavioral traits, which are crucial for an agent to use this tool effectively in development contexts.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the schema fully documents all parameters. The description adds no additional meaning beyond implying TailwindCSS usage, which is already clear from the tool name and schema. Thus, it meets the baseline for high schema coverage without compensating value.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb 'generate' and the resource 'HTML component templates with TailwindCSS classes', making the purpose evident. However, it doesn't explicitly differentiate from sibling tools like 'convert_css_to_tailwind' or 'generate_color_palette', which also generate outputs but for different purposes, so it misses full sibling distinction.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives. It doesn't mention prerequisites, typical use cases, or compare to siblings like 'get_tailwind_utilities' or 'search_tailwind_docs', leaving the agent with no context for selection.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_tailwind_colorsB

Get TailwindCSS color palette information

ParametersJSON Schema
NameRequiredDescriptionDefault
colorNameNoSpecific color name (e.g., 'blue', 'red')
includeShadesNoInclude all color shades (default: true)

TDQS

B3.1/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It states what the tool does ('Get... information') but doesn't describe how it behaves: whether it returns structured data or raw text, if it has rate limits, authentication requirements, error conditions, or what format the color information comes in. For a tool with zero annotation coverage, this is a significant gap in behavioral context.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is extremely concise at just one sentence ('Get TailwindCSS color palette information'), with zero wasted words. It's front-loaded with the core purpose and appropriately sized for a simple lookup tool. Every word earns its place by clearly communicating the tool's function.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's apparent simplicity (2 optional parameters, no output schema, no annotations), the description is minimally complete but lacks important context. It doesn't explain what format the color information returns (e.g., JSON, CSS values, hex codes), whether it covers all Tailwind colors or a subset, or how it relates to sibling tools. For a tool with no output schema, the description should ideally provide some indication of return values.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 100% description coverage, with clear descriptions for both parameters ('colorName' and 'includeShades'). The tool description adds no parameter-specific information beyond what the schema already provides. With high schema coverage, the baseline score of 3 is appropriate as the schema does the heavy lifting for parameter documentation.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose as 'Get TailwindCSS color palette information', which is a specific verb ('Get') + resource ('TailwindCSS color palette information'). It distinguishes from most siblings like 'convert_css_to_tailwind' or 'install_tailwind', but doesn't explicitly differentiate from 'generate_color_palette' or 'search_tailwind_docs' which might also involve color information.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives. It doesn't mention when this tool is appropriate, when to use sibling tools like 'generate_color_palette' (which might create new palettes) or 'search_tailwind_docs' (which might provide broader documentation), or any prerequisites or context for usage.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_tailwind_config_guideC

Get TailwindCSS configuration guides for different frameworks

ParametersJSON Schema
NameRequiredDescriptionDefault
topicNoConfiguration topic (e.g., 'installation', 'customization')
frameworkNoTarget framework (e.g., 'react', 'vue', 'nextjs')

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure but provides minimal information. It doesn't indicate whether this is a read-only operation, whether it requires authentication, what format the guides are returned in, or any rate limits. For a tool with zero annotation coverage, this leaves significant behavioral questions unanswered.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that clearly communicates the tool's purpose without any wasted words. It's appropriately sized for a simple tool and gets straight to the point without unnecessary elaboration.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given that there are no annotations, no output schema, and the description provides minimal behavioral context, this description is incomplete for effective tool usage. While the purpose is clear, the lack of guidance on when to use it, what to expect in return, and how it differs from sibling tools leaves significant gaps for an AI agent trying to select and invoke this tool correctly.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema description coverage is 100%, with both parameters ('topic' and 'framework') having clear descriptions in the schema. The tool description adds no additional parameter information beyond what's already documented in the schema. According to the scoring rules, when schema coverage is high (>80%), the baseline is 3 even with no param info in the description.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose as 'Get TailwindCSS configuration guides for different frameworks' - it specifies the verb ('Get'), resource ('TailwindCSS configuration guides'), and scope ('for different frameworks'). However, it doesn't explicitly distinguish this from sibling tools like 'search_tailwind_docs' or 'install_tailwind', which prevents a perfect score.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives. There's no mention of when this tool is appropriate versus using 'search_tailwind_docs' or 'install_tailwind', nor any prerequisites or context for usage. The description merely restates the tool's function without operational guidance.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_tailwind_utilitiesB

Get TailwindCSS utilities by category, property, or search term

ParametersJSON Schema
NameRequiredDescriptionDefault
categoryNoFilter by utility category (e.g., 'layout', 'typography', 'colors')
propertyNoFilter by CSS property (e.g., 'margin', 'color', 'font-size')
searchNoSearch term to find utilities

TDQS

B3.1/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It describes a read operation ('Get') but doesn't mention any behavioral traits such as response format, pagination, rate limits, or error handling. This leaves significant gaps for an agent to understand how to interact with the tool effectively.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that front-loads the core purpose without any wasted words. It directly communicates the tool's function and filtering options, making it easy to parse and understand quickly.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's moderate complexity (3 optional parameters, no output schema, no annotations), the description is adequate but incomplete. It covers the basic purpose and parameters but lacks details on behavioral traits and output, which are necessary for full contextual understanding, especially without annotations to fill in gaps.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema description coverage is 100%, with clear descriptions for each parameter in the input schema. The description adds minimal value by listing the filtering criteria ('category, property, or search term') but doesn't provide additional syntax, format details, or examples beyond what the schema already covers, meeting the baseline for high schema coverage.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the action ('Get') and resource ('TailwindCSS utilities') with specific filtering criteria ('by category, property, or search term'), making the purpose immediately understandable. It doesn't explicitly differentiate from siblings like 'get_tailwind_colors' or 'search_tailwind_docs', which is why it doesn't reach a 5.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives like 'get_tailwind_colors' for color-specific utilities or 'search_tailwind_docs' for broader documentation searches. It implies usage through the filtering options but offers no explicit context or exclusions.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

install_tailwindC

Generate installation commands and configuration files for TailwindCSS in different frameworks

ParametersJSON Schema
NameRequiredDescriptionDefault
frameworkYesTarget framework (e.g., 'react', 'nextjs', 'vue', 'vite', 'laravel', 'angular', 'svelte')
packageManagerNoPackage manager to use (default: npm)
includeTypescriptNoInclude TypeScript configuration (default: false)

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden of behavioral disclosure. It states the tool generates commands and files but doesn't clarify if this is a read-only operation, whether it modifies existing files, what permissions are needed, or what the output format looks like (e.g., text commands vs. file creation). For a tool that implies file system interaction, this lack of detail is a significant gap.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that front-loads the core purpose without unnecessary words. It directly states what the tool does ('Generate installation commands and configuration files') and the scope ('for TailwindCSS in different frameworks'), earning its place with zero waste. This is appropriately sized for the tool's complexity.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's moderate complexity (3 parameters, no output schema, no annotations), the description is incomplete. It lacks behavioral context (e.g., file system impact, output format), usage guidelines, and any mention of return values or errors. While the schema covers parameters well, the description fails to address broader operational aspects, leaving gaps for an agent to invoke it correctly.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 100% description coverage, clearly documenting all parameters (framework, packageManager, includeTypescript) with enums and defaults. The description adds no additional parameter semantics beyond what the schema provides, such as explaining framework-specific nuances or TypeScript integration details. With high schema coverage, the baseline score of 3 is appropriate, as the description doesn't compensate but also doesn't detract.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose: 'Generate installation commands and configuration files for TailwindCSS in different frameworks.' It specifies the verb ('Generate') and resource ('installation commands and configuration files'), and distinguishes from siblings like 'convert_css_to_tailwind' or 'search_tailwind_docs' by focusing on setup rather than conversion or documentation. However, it doesn't explicitly differentiate from 'get_tailwind_config_guide', which might overlap in providing configuration guidance.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives. It doesn't mention prerequisites (e.g., needing a project initialized), exclusions (e.g., not for existing Tailwind setups), or comparisons to siblings like 'get_tailwind_config_guide' for configuration help. The agent must infer usage from the purpose alone, which is insufficient for clear decision-making.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

search_tailwind_docsC

Search TailwindCSS documentation

ParametersJSON Schema
NameRequiredDescriptionDefault
queryYesSearch query for TailwindCSS documentation
categoryNoFilter by documentation category
limitNoLimit number of results (default: 10)

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries full burden for behavioral disclosure but offers minimal information. It doesn't describe what the search returns (e.g., links, snippets, full documentation), whether it's read-only or has side effects, performance characteristics, or error conditions. 'Search' implies read-only behavior, but this isn't explicitly stated, leaving gaps in understanding the tool's operation.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is extremely concise at just three words, with zero wasted language. It's front-loaded with the core purpose and contains no unnecessary elaboration. For a simple search tool, this brevity is appropriate and efficient.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's moderate complexity (search with filtering and limits), lack of annotations, and absence of an output schema, the description is insufficiently complete. It doesn't explain what the search returns, how results are formatted, or any behavioral nuances. The agent must rely heavily on the input schema alone, leaving significant gaps in understanding the tool's full context and output.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, with all three parameters well-documented in the schema itself. The description adds no additional parameter semantics beyond what's already in the schema (query, category, limit). This meets the baseline of 3 since the schema adequately covers parameter meanings, but the description doesn't enhance understanding with examples or contextual usage.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose as 'Search TailwindCSS documentation' with a specific verb ('Search') and resource ('TailwindCSS documentation'). It distinguishes from siblings like 'get_tailwind_colors' or 'get_tailwind_utilities' which retrieve specific data rather than performing searches. However, it doesn't explicitly differentiate from potential search alternatives that might not exist in the sibling set.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives. It doesn't mention prerequisites, appropriate contexts, or comparisons with sibling tools like 'get_tailwind_config_guide' which might provide structured information versus search results. The agent must infer usage solely from the tool name and parameters.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.

  1. 8 tool updatesv0.1.1
    • First observedconvert_css_to_tailwind
    • First observedgenerate_color_palette
    • First observedgenerate_component_template
    • First observedget_tailwind_colors
    • First observedget_tailwind_config_guide
    • First observedget_tailwind_utilities
    • First observedinstall_tailwind
    • First observedsearch_tailwind_docs

TDQS

B3.4/5.0
Disambiguation4/5

Most tools have distinct purposes, but there is some potential overlap between 'search_tailwind_docs' and 'get_tailwind_utilities' (which includes search functionality) that could cause confusion. Otherwise, tools like 'convert_css_to_tailwind' and 'generate_color_palette' are clearly differentiated.

Naming Consistency5/5

All tools follow a consistent snake_case pattern with clear verb_noun structures (e.g., 'convert_css_to_tailwind', 'generate_color_palette'). The naming is predictable and readable throughout the set.

Tool Count5/5

With 8 tools, this server is well-scoped for a TailwindCSS helper, covering key areas like conversion, generation, configuration, and documentation. Each tool appears to earn its place without being overwhelming or too sparse.

Completeness4/5

The tool set covers most core TailwindCSS workflows, including installation, configuration, color management, component generation, and documentation search. A minor gap is the lack of tools for advanced features like custom plugins or build optimization, but agents can likely work around this.

Maintenance

ActivityInactive
ResponsivenessUnresponsive

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/CarbonoDev/tailwindcss-mcp-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server