Convert CSS to Tailwind classes and generate component templates via tailwindcss-mcp-server (npx)

Recipe: Convert CSS to Tailwind and generate components via tailwindcss-mcp-server

Setup

npx tailwindcss-mcp-server   # stdio transport, no auth

Handshake

→ initialize  (protocolVersion: "2024-11-05")
← serverInfo: { name: "tailwindcss-server", version: "0.1.0" }
→ tools/list
← 8 tools: get_tailwind_utilities, get_tailwind_colors, get_tailwind_config_guide,
           search_tailwind_docs, install_tailwind, convert_css_to_tailwind,
           generate_color_palette, generate_component_template

Tool call 1: convertcssto_tailwind

→ {"method":"tools/call","params":{"name":"convert_css_to_tailwind","arguments":{
     "css":".card { display: flex; flex-direction: column; padding: 1rem; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); background-color: white; gap: 0.5rem; }",
     "mode":"classes"}}}

← {"tailwindClasses":"flex flex-col p-4",
    "unsupportedStyles":["border-radius: 0.5rem","box-shadow: 0 1px 3px rgba(0,0,0,0.1)","background-color: white","gap: 0.5rem"],
    "suggestions":["Some CSS properties don't have direct TailwindCSS equivalents. Consider using arbitrary values like [property:value]"],
    "customUtilities":[]}

Note: The converter only mapped 2 of 7 properties (display: flex → flex, flex-direction: column → flex-col). It missed rounded-lg, shadow-sm, bg-white, and gap-2 — all standard Tailwind classes. Treat output as a starting point; the tool underconverts.

Tool call 2: generatecomponenttemplate

→ {"method":"tools/call","params":{"name":"generate_component_template","arguments":{
     "componentType":"card","style":"modern","darkMode":true,"responsive":true}}}

← {"html":"<div class=\"rounded-lg border bg-card text-card-foreground shadow-sm p-6 border-gray-100 bg-white dark:bg-gray-800 dark:border-gray-700 sm:p-8\">
  <div class=\"flex flex-col space-y-1.5 pb-6\">
    <h3 class=\"text-2xl font-semibold leading-none tracking-tight\">Card Title</h3>
    <p class=\"text-sm text-muted-foreground\">Card description goes here</p>
  </div>
  <div class=\"space-y-4\">
    <p>This is the card content area.</p>
  </div>
  <div class=\"flex items-center pt-6\">
    <button class=\"inline-flex items-center justify-center rounded-md text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/90 px-4 py-2\">Action</button>
  </div>
</div>",
  "description":"A modern style card component with dark mode support and responsive design",
  "utilities":["rounded-lg","border","bg-card","shadow-sm","p-6","dark:bg-gray-800","sm:p-8"],
  "customizations":["Customize card padding","Adjust border radius","Modify shadow","Change colors"]}

Tool call 3: gettailwindutilities

→ {"method":"tools/call","params":{"name":"get_tailwind_utilities","arguments":{"category":"spacing"}}}
← Array of utility objects: m-0 (margin:0), m-1 (margin:0.25rem), m-2 (margin:0.5rem), m-4 (margin:1rem), m-8 (margin:2rem), p-0..p-8, each with modifiers (sm:, md:, lg:, hover:, focus:, dark:) and examples.

Assessment

• Startup: ~3s (npm install on first run, then instant)
• convert_css_to_tailwind: Works but underconverts — only 2/7 properties mapped. Known gap.
• generate_component_template: Solid output — proper dark mode, responsive, shadcn-compatible classes.
• get_tailwind_utilities: Returns structured data with values, modifiers, examples. Verbose but complete.