MCP 服务器

Tailwind Shades

io.github.bourhaouta/tailwindshades
设计与创意 开发者工具 公开且可连接 MCP 2025-11-25

此 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.
只读 幂等
输入模式
{'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"}}}
输出模式
{'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.
只读 幂等
输入模式
{'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"}}}
输出模式
{'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.
只读 幂等
输入模式
{'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"}}}
输出模式
{'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}
已添加
get_tailwind_palette
2026年10月2日 02:40
已添加
find_closest_tailwind_color
2026年10月2日 02:40
已添加
generate_palette
2026年10月2日 02:40