tailwind-context-resolver-mcp

Resolves and validates Tailwind classes against the actual local project config

An MCP server that loads your project'stailwind.config.ts/jsand exposes itsactual design systemto AI agents — so they stop hallucinating class names.

AI agents generate Tailwind classes based on training data — the default Tailwind docs. Your project is not the default docs.

You have a custom color palette. A non-standard spacing scale. Maybe a prefix liketw-. Brand tokens likebg-brand-primary. The agent doesn't know any of this. It guesses.

// Agent confidently generates this: <div className="bg-primary-500 text-brand p-18 tw-flex-center"> // Your project has: // - bg-brand-primary (not bg-primary-500) // - no "text-brand" token // - spacing.18 = 4.5rem (ok actually) // - no "flex-center" utility // - no "tw-" prefix

The agent can't validate what it writes because it has no access to your resolved config. It's working from memory of the default theme — not yours.

This MCP server runs the Tailwind resolver locally and gives agents a typed, queryable interface to your actual config. Before writing a component, the agent can ask:

- "What brand colors exist in this project?"
- "Isp-18a valid spacing value here?"
- "Does this project use a custom prefix?"
- "Isbg-brand-primary flex grida valid class string?"

Query any namespace in the resolved Tailwind theme. Returns all design tokens as flat key-value pairs.

namespace: "colors.brand" → { primary: "#3b82f6", secondary: "#8b5cf6", danger: "#ef4444" } namespace: "spacing" → { "1": "0.25rem", "2": "0.5rem", "18": "4.5rem", ... } namespace: "fontFamily" → { sans: ["Inter", "sans-serif"], mono: [...] }

Use before generating componentsto discover what tokens actually exist.

Validates a Tailwind className string against the project's resolved config. Returns valid classes, invalid (hallucinated) classes, and conflict warnings.

{ "valid_classes": ["bg-brand-primary", "text-white", "p-4", "hover:bg-brand-secondary", "flex"], "invalid_classes": ["bg-fake-token", "text-brand"], "warnings": ["Conflicting multiple layout models: flex, grid"], "config_prefix": "" }

Use to catch hallucinated design tokensbefore writing code.

Detects conflicting Tailwind utilities — e.g.flex+grid, orabsolute+fixedon the same element.

{ "conflicts": [{ "classes": ["flex", "grid"], "reason": "multiple layout models" }], "has_conflicts": true }

Returns a compact overview: Tailwind version, prefix, which theme sections are customized, active plugins.

{ "tailwind_version": "3.4.19", "prefix": "", "theme_extensions": ["colors", "spacing", "fontFamily"], "total_colors": 142, "total_spacing": 34, "plugins": ["@tailwindcss/forms"] }

Use firstto understand the project's design system before querying specific tokens.

Add to yourclaude_desktop_config.json:

{ "mcpServers": { "tailwind-context-resolver": { "command": "npx", "args": ["-y", "tailwind-context-resolver-mcp"] } } }

{ "tailwind-context-resolver": { "command": "npx", "args": ["-y", "tailwind-context-resolver-mcp"] } }

- Tailwind CSS v3— v4 uses a CSS-based config format and is not supported (the server will tell you clearly)
- Node.js 18+
- Atailwind.config.jsortailwind.config.tsin your project

The server uses the same config loading strategy as the Tailwind CLI:
- jitiloads yourtailwind.config.tsat runtime — nots-noderequired
- tailwindcss/resolveConfigmerges your config with Tailwind defaults to produce the full resolved theme
- Tools performtoken-based class validation— checking thatbg-brand-primarymaps to an actualcolors.brand.primarytoken — without running the full PostCSS/JIT pipeline

1. get_config_summary → understand the project's design system 2. resolve_theme_tokens → query specific namespaces before writing classes (namespace: "colors.brand", "spacing") 3. validate_class_string → validate the className string before committing it 4. detect_css_conflicts → final sanity check for conflicting utilities

- playwright-network-chaos-mcp— network fault injection for Playwright tests
- v8-cpu-profile-decoder-mcp— V8 CPU profile analysis for AI agents

Execute any LLM-generated code in the YepCode secure and scalable sandbox environment and create your own MCP tools using JavaScript or Python, with full support for NPM and PyPI packages