audit_theme_usage
Identifies dead design tokens by scanning the project files. Checks each CSS custom property defined in @theme blocks to see if it is referenced anywhere in the source code.
LABSCO SUMMARY
Validating against the JIT engine rather than a class list is the difference between checking spelling and checking truth.
Tailwind's real vocabulary is whatever the project's config produces, including arbitrary values and custom scales, so any validator working from a static list will reject valid classes and accept invalid ones. Running the classes through the compiler makes the answer authoritative. The conflict detector addresses the other common failure, which is subtler: two utilities setting the same property do not error, they silently resolve by stylesheet order and produce something that looks nearly right. Supporting both the v3 config file and the v4 CSS theme is necessary rather than generous — that migration split the ecosystem and a tool that handles one is useless on the other.
What it is
A Tailwind configuration analysis toolkit: it resolves the project's real theme, validates class strings against it, detects conflicts, and audits which tokens are actually used.
What you get
- validate_class_string checks a className against the project's own configuration rather than against Tailwind's defaults, which is where a model's guess usually goes wrong.
- detect_css_conflicts finds utilities that fight each other in the same class string — two values for the same property, where the winner depends on stylesheet order.
- simulate_jit_compilation validates classes against the JIT engine programmatically, which is the authoritative answer rather than a lookup table.
- resolve_theme_tokens queries the resolved theme for a namespace, and resolve_v4_theme_variables parses the root CSS file for Tailwind v4 projects where the theme lives in CSS rather than a config file.
- audit_theme_usage scans the project to identify dead design tokens — defined and never used.
- get_config_summary returns a compact overview including the version, which decides which of the two theme paths applies.
Requirements
A Tailwind project for it to read — the tools work against the project's own configuration and CSS.
Setup effort
One command — npx -y tailwind-context-resolver-mcp
USE CASES
01
Checking a class string is actually valid here
Validate against the project's own configuration and through the JIT engine, rather than against Tailwind's defaults.
02
Finding out why a style is not applying
Detect conflicting utilities in the class string — two values for the same property resolve silently by stylesheet order rather than erroring.
03
Working out what tokens exist
Resolve the theme for the namespace, using the v4 CSS path or the config path depending on which version the project is on.
04
Cleaning up the design system
Audit which tokens are actually referenced anywhere and find the ones defined and never used.
7 tools
Counted once with only startup setup. Other versions, modes or optional credentials may expose a different list.
detect_css_conflicts
Detects conflicting Tailwind utility classes in a className string — e.g. applying both 'flex' and 'grid', or multiple position utilities. Use to prevent silent CSS bugs before generating or reviewing component code.
get_config_summary
Returns a compact overview of the project's Tailwind configuration: version, prefix, which theme sections have been customized, and what plugins are active. Use first to understand the project's design system before querying specific tokens.
resolve_theme_tokens
Queries the resolved Tailwind CSS theme for a specific namespace and returns all design tokens. Use before generating components to discover what colors, spacing, or font values actually exist in this project. Example namespaces: 'colors', 'colors.brand', 'spacing', 'fontFamily', 'fontSize', 'screens'.
resolve_v4_theme_variables
Parses the project's root CSS file (Tailwind CSS v4) and extracts all design tokens defined in @theme blocks. Returns a flat map of CSS custom properties (e.g., --color-primary-500 -> oklch(...)).
simulate_jit_compilation
Validates Tailwind utility classes against the JIT engine by programmatically compiling them. Supports complex arbitrary values, JIT modifiers, and custom plugin classes. Returns the generated CSS rules.
validate_class_string
Validates a Tailwind CSS className string against the project's actual config. Returns valid_classes, invalid_classes (hallucinated tokens), possibly_valid_classes (plugin-generated — cannot verify without PostCSS), and conflict warnings. Handles variants (hover:, dark:, lg:), important (!), opacity modifiers (/50), negative values (-mt-4), and arbitrary values ([32rem]). Use to catch hallucinated design tokens before writing code.
BEFORE YOU INSTALL
What to know first
Tools you get
7 tools when we connected.
Requires
- npx on PATH
- Node.js 18+
CONTEXT COST
Light Standing cost
Rated by the size of the 7 tool definitions that ride along on every turn, not by how many there are
INSTALLATION
Connect your client
Add the block to your client, or run the command directly.
Server setup
Configuration file
JSON
{
"mcpServers": {
"tailwind-context-resolver-mcp": {
"command": "npx",
"args": [
"-y",
"tailwind-context-resolver-mcp"
]
}
}
}npx
TERMINAL
npx -y tailwind-context-resolver-mcp
