Tailwind Shades
What this MCP does
Looks up Tailwind CSS colors, finds closest default shades, and generates complete custom palettes.
Tools
Input schema
{'type': 'object', '$schema': 'https://json-schema.org/draft/2020-12/schema', 'required': ['color'], 'properties': {'color': {'type': 'string', 'description': 'Any CSS color: hex (#db4d53), rgb(), hsl(), oklch() or a named color'}, 'tailwindVersion': {'enum': [4, 3, 2, 1], 'type': 'number', 'description': "The project's Tailwind CSS major version. Defaults to 4"}}}
Output schema
{'type': 'object', '$schema': 'https://json-schema.org/draft/2020-12/schema', 'required': ['name', 'shade', 'className', 'tailwindValue', 'input', 'distance', 'visiblyDifferent', 'tailwindVersion'], 'properties': {'name': {'type': 'string', 'description': 'Tailwind color name, e.g. "red"'}, 'input': {'type': 'object', 'required': ['oklch', 'hex'], 'properties': {'hex': {'type': 'string'}, 'oklch': {'type': 'string'}}, 'description': 'The input color', 'additionalProperties': False}, 'shade': {'type': 'number', 'description': 'Closest shade, e.g. 500'}, 'distance': {'type': 'number', 'description': 'OKLab distance: 0 is identical, under 0.02 is hard to see'}, 'className': {'type': 'string', 'description': 'Color part of a utility class, e.g. "red-400" for bg-red-400'}, 'tailwindValue': {'type': 'object', 'required': ['oklch', 'hex'], 'properties': {'hex': {'type': 'string'}, 'oklch': {'type': 'string'}}, 'description': "Tailwind's value for that shade", 'additionalProperties': False}, 'tailwindVersion': {'type': 'number'}, 'visiblyDifferent': {'type': 'boolean', 'description': 'True when the Tailwind shade looks different from the input'}}, 'additionalProperties': False}
Input schema
{'type': 'object', '$schema': 'https://json-schema.org/draft/2020-12/schema', 'required': ['color'], 'properties': {'name': {'type': 'string', 'pattern': '^[a-z][a-z0-9-]*$', 'description': 'Color name used in the code, e.g. "brand". Defaults to the closest Tailwind color, which replaces Tailwind\'s own palette of that name (e.g. red), so pass a name unless that is what the user wants'}, 'color': {'type': 'string', 'description': 'Any CSS color: hex (#db4d53), rgb(), hsl(), oklch() or a named color'}, 'format': {'enum': ['oklch', 'hex', 'rgb'], 'type': 'string', 'description': 'Color format. Defaults to oklch for v4 and hex for older versions'}, 'output': {'enum': ['theme', 'config', 'css'], 'type': 'string', 'description': 'theme: a v4 @theme block for the main CSS file. config: an object for theme.extend.colors in tailwind.config.js. css: plain CSS variables. Defaults to theme for v4 and config for older versions'}, 'tailwindVersion': {'enum': [4, 3, 2, 1], 'type': 'number', 'description': "The project's Tailwind CSS major version. Defaults to 4"}}}
Output schema
{'type': 'object', '$schema': 'https://json-schema.org/draft/2020-12/schema', 'required': ['code', 'name', 'tailwindVersion', 'format', 'output', 'inputShade', 'closestTailwindColor', 'shades', 'replacesTailwindColor'], 'properties': {'code': {'type': 'string', 'description': 'The palette as code, ready to paste'}, 'name': {'type': 'string'}, 'format': {'type': 'string'}, 'output': {'type': 'string'}, 'shades': {'type': 'array', 'items': {'type': 'object', 'required': ['shade', 'value'], 'properties': {'shade': {'type': 'number'}, 'value': {'type': 'string'}}, 'additionalProperties': False}}, 'inputShade': {'type': 'number', 'description': 'Shade that holds the input color unchanged, e.g. 500'}, 'tailwindVersion': {'type': 'number'}, 'closestTailwindColor': {'type': 'string', 'description': 'Tailwind color whose curve the palette follows'}, 'replacesTailwindColor': {'type': 'boolean', 'description': 'True when the code replaces a default Tailwind palette (default color name, theme or config output)'}}, 'additionalProperties': False}
Input schema
{'type': 'object', '$schema': 'https://json-schema.org/draft/2020-12/schema', 'required': ['name'], 'properties': {'name': {'type': 'string', 'description': 'A default Tailwind color, like "blue", or one shade of it, like "blue-500"'}, 'tailwindVersion': {'enum': [4, 3, 2, 1], 'type': 'number', 'description': "The project's Tailwind CSS major version. Defaults to 4"}}}
Output schema
{'type': 'object', '$schema': 'https://json-schema.org/draft/2020-12/schema', 'required': ['name', 'tailwindVersion', 'shades'], 'properties': {'name': {'type': 'string', 'description': 'Tailwind color name, e.g. "blue"'}, 'shades': {'type': 'array', 'items': {'type': 'object', 'required': ['shade', 'className', 'value'], 'properties': {'shade': {'type': 'number'}, 'value': {'type': 'string', 'description': "Tailwind's value: oklch() in v4, hex in older versions"}, 'className': {'type': 'string', 'description': 'Color part of a utility class, e.g. "blue-500" for bg-blue-500'}}, 'additionalProperties': False}, 'description': 'All shades, or only the one asked for'}, 'tailwindVersion': {'type': 'number'}}, 'additionalProperties': False}
Recent tool changes
Similar MCP servers
GripForge
Generates, rigs, animates, analyzes, and packages game characters, weapons, armor, effects, environments, and engine-ready assets.
spriteship
Generates and manages 2D game characters, assets, animations, tilesets, UI packs, maps, and engine-ready exports for multiple gam…
Blixtworks
Offers pay-per-call utilities for text, image processing and analysis, data conversion, validation, web inspection, cryptography,…
Compose Preview Catalogs
Browses, renders, compares, audits, and edits Jetpack Compose preview catalogs and associated UI designs.
arch-tools-mcp
Provides general-purpose agent APIs for browser automation, web and PDF extraction, data conversion, email operations, fact check…
kernelcad
Authors, evaluates, reviews, simulates, edits, and exports parametric CAD assemblies and geometry from editable TypeScript-based …
floot
Creates, edits, previews, databases, and publishes full-stack web and mobile applications with hosted resources and deployment wo…
Raven
Supports coding agents with design audits, design-system guidance, and a configurable visual preference profile.