Tailwind Shades
Qué hace este MCP
Looks up Tailwind CSS colors, finds closest default shades, and generates complete custom palettes.
Herramientas
Esquema de entrada
{'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"}}}
Esquema de salida
{'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}
Esquema de entrada
{'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"}}}
Esquema de salida
{'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}
Esquema de entrada
{'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"}}}
Esquema de salida
{'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}
Cambios recientes en herramientas
Servidores MCP similares
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.