Tailwind Shades
Was dieses MCP kann
Looks up Tailwind CSS colors, finds closest default shades, and generates complete custom palettes.
Tools
Eingabeschema
{'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"}}}
Ausgabeschema
{'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}
Eingabeschema
{'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"}}}
Ausgabeschema
{'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}
Eingabeschema
{'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"}}}
Ausgabeschema
{'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}
Letzte Tool-Änderungen
Ähnliche MCP-Server
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.