Tailwind MCP Server

CSS generation layer for the YAML-driven UI platform. Scans HTML markup for Tailwind utility classes and emits optimized CSS in multiple architectural formats — including Shadow DOM-compatible splits. All component generation servers (Lit, Stencil, Juris) route CSS generation through this server.

Stack: Node.js · ES modules · Tailwind CSS v4 · @tailwindcss/cli · Hono · MCP SDK

Port: 3001

MCP Tools

Output Formats

Format Description
css Full raw CSS output
minified Minified CSS
tokens CSS custom properties only (:root scope)
utils Utility classes only (Shadow DOM safe)
shadow Utils + keyframes (Shadow DOM optimized)
root Tokens + properties (document level)
props CSS properties only
keys Keyframes/animations only
all All layers bundled

The shadow format is designed for web components — strips :root-scoped tokens so styles are encapsulated without leaking.

Role in the Platform

Tailwind v4 arbitrary values (bg-[#1da1f2], w-[37px]) and responsive/state variants (sm:, hover:, dark:) are fully supported. The layered output model maps cleanly onto the Shadow DOM architecture used by Lit and Stencil components.

See research-yaml-platform for platform architecture.