Servidor MCP

Tailwind Shades

io.github.bourhaouta/tailwindshades

Qué hace este MCP

Looks up Tailwind CSS colors, finds closest default shades, and generates complete custom palettes.

find_closest_tailwind_color
Find the closest Tailwind color
Finds the shade in Tailwind's default palette that looks most like a given color, e.g. #db4d53 -> red-500. Use it to pick an existing Tailwind class (bg-red-500) instead of an arbitrary value. If the difference is visible, use generate_palette to add the exact color as a custom palette instead.
Solo lectura Idempotente
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}
generate_palette
Generate a Tailwind palette
Generates a full Tailwind CSS palette (50-950) from one color, ready to paste. Call it whenever you add a color to a Tailwind theme (e.g. "add a brand color #db4d53"), instead of writing a single variable or inventing shades. The input color stays exactly at its best-fit shade, and the other shades follow the closest Tailwind color, so they look like Tailwind's own.
Solo lectura Idempotente
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}
get_tailwind_palette
Get Tailwind's default colors
Looks up Tailwind's own default colors, exactly as Tailwind defines them: a whole color (e.g. "blue", all shades) or one shade (e.g. "slate-500"), for Tailwind v4, v3, v2 or v1. Use it instead of writing default Tailwind color values from memory. Values are oklch() in v4 and hex in older versions.
Solo lectura Idempotente
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}
Añadido
get_tailwind_palette
2 de October de 2026 a las 02:40
Añadido
find_closest_tailwind_color
2 de October de 2026 a las 02:40
Añadido
generate_palette
2 de October de 2026 a las 02:40