tailwind-mcp
Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
Instructions
Guidance the server publishes about itself, which clients place ahead of the tool catalog so the model reads it before choosing anything.
This server publishes no instructions, or was last inspected before Glama recorded them.
Capabilities
Features and capabilities supported by this server
Protocol revision2025-11-25
| Capability | Details |
|---|---|
| tools | {
"listChanged": true
} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| tailwind_validateA | Check whether candidate Tailwind classes exist in this project and return the CSS they generate. Accepts variants (md:hover:bg-red-500) and arbitrary values (w-[37px]). Use before writing markup to avoid emitting classes that do not exist. |
| tailwind_search_classesA | Search the project's real Tailwind class list. Use when you know the intent but not the exact utility name. Returns utility names and the modifiers they accept. |
| tailwind_themeB | Read the project's design tokens: colors, spacing, breakpoints, fonts and any custom theme values. Use the project's own token names instead of generic ones. |
| tailwind_variantsA | List the variants this project understands, such as hover:, md:, dark: or data-[state=open]. Use this to check that a variant exists before using it. |
| tailwind_diagnoseA | Check a class list for every problem at once: classes that do not exist (with spelling suggestions), classes that use an arbitrary value where a theme token would do, classes that override each other, and v3 classes that need migrating to v4. This is the tool to call before writing or editing markup. |
| tailwind_conflictsA | Report which class wins when several set the same CSS property, and which ones are silently overridden. The winner follows Tailwind's own class order. |
| tailwind_canonicalizeA | Rewrite a class list into Tailwind's canonical form and order: arbitrary values that match a theme token become that token, deprecated spellings are renamed, and the classes are sorted the way prettier-plugin-tailwindcss would sort them. |
| tailwind_migrateA | Map v3 class names to their v4 equivalents, including the scale renames whose meaning changed silently (shadow-sm, rounded, blur and the rest). Use this when porting v3 code to v4. |
| tailwind_contrastA | Compute the WCAG contrast ratio of two colours and whether they pass AA or AAA. Colours may be theme tokens such as 'red-500' or 'white', or literal CSS colours. |
Prompts
Interactive templates invoked by user choice
| Name | Description |
|---|---|
No prompts | |
Resources
Contextual data attached and managed by the client
| Name | Description |
|---|---|
No resources | |
TDQS
Scored across 9 tools
Most tools have clearly distinct purposes (search, theme, variants, migrate, contrast). However tailwind_validate and tailwind_diagnose overlap significantly, since diagnose also detects non-existent classes, and both are pitched as the thing to run before writing markup, creating a real risk of misselection.
Every tool follows the same tailwind_<verb/noun> snake_case pattern and reads consistently. No mixing of conventions.
Nine tools is well-scoped for a Tailwind helper surface; each covers a distinct facet (validate, search, theme, variants, diagnose, conflicts, canonicalize, migrate, contrast) with no obvious filler.
The surface covers the main lifecycle: discovery (search/theme/variants), validation, diagnostics, conflict resolution, canonicalization, migration, and accessibility. Only minor gaps remain, such as full stylesheet generation or config-editing operations.