Search / io.github.bourhaouta/tailwindshades
protogridR0· no sign-inTailwind CSS palettes (50-950) from any color, the closest Tailwind color, and Tailwind's defaults
v1.6.0 · active · repository · website · descriptor JSON · versions
{
"mcpServers": {
"tailwindshades": {
"type": "http",
"url": "https://tailwindshades.bourhaouta.com/mcp"
}
}
}claude mcp add --transport http tailwindshades https://tailwindshades.bourhaouta.com/mcp[mcp_servers.tailwindshades]
url = "https://tailwindshades.bourhaouta.com/mcp"
{
"$schema": "https://opencode.ai/config.json",
"mcp": {
"tailwindshades": {
"type": "remote",
"url": "https://tailwindshades.bourhaouta.com/mcp",
"enabled": true
}
}
}{
"mcpServers": {
"tailwindshades": {
"type": "http",
"url": "https://tailwindshades.bourhaouta.com/mcp"
}
},
"deeplink": "cursor://anysphere.cursor-deeplink/mcp/install?name=tailwindshades&config=eyJ0eXBlIjoiaHR0cCIsInVybCI6Imh0dHBzOi8vdGFpbHdpbmRzaGFkZXMuYm91cmhhb3V0YS5jb20vbWNwIn0%3D"
}{
"servers": {
"tailwindshades": {
"type": "http",
"url": "https://tailwindshades.bourhaouta.com/mcp"
}
}
}{
"mcpServers": {
"tailwindshades": {
"httpUrl": "https://tailwindshades.bourhaouta.com/mcp"
}
}
}extensions:
"tailwindshades":
enabled: true
name: "tailwindshades"
type: streamable_http
uri: "https://tailwindshades.bourhaouta.com/mcp"
timeout: 300
protocol.modernsupports 2026-07-28 (server/discover)protocol.statelessanswers without a sessionprotocol.transportstreamable HTTPprotocol.list_ttltools/list declares ttlMs 0, so clients re-fetch it on every useauth.prm, auth.as_metadata, auth.cimdno remote uses OAuthauth.secret_in_urlno templated URLtools.descriptionsevery tool has a descriptiontools.description_lengthdescriptions are concisetools.schemasevery tool has an object input schematools.annotations5 of 5 tools declare readOnlyHint or destructiveHinttools.directory_hintsno tool declares all four of readOnlyHint, destructiveHint, idempotentHint and openWorldHint; missing: find_closest_tailwind_color (destructiveHint); list_tailwind_colors (destructiveHint); convert_color (destructiveHint); …tools.token_costabout 1,238 tokens to load every tooltools.api_dumptools are not a one-to-one API dumpstability.changes7 tool changes in 30 daysstability.rug_pullno tool changed its meaning under the same namegenerate_palettechangedoutput schemagenerate_palettechangedinput schemaconvert_coloraddedConverts any CSS color to oklch(), hex and rgb, formatted like Tailwind (oklch() is what Tailwind v4 uses). Colors outside a format are mapped into it: oklch() to Display P3 like Tailwind's palette, hex and rgb to sRGB. Use it for one value; to add a color with all its shades, call generate_palette instead.
list_tailwind_colorsaddedLists the names of Tailwind's default colors for a Tailwind version (e.g. red, slate, mauve in v4), with the shades each one has and its 500 value as a sample. Use it to see which colors exist before calling get_tailwind_palette or picking a utility class.
closest_tailwind_colorremovedFinds 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.
get_tailwind_paletteaddedLooks 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.
find_closest_tailwind_coloraddedFinds 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.
Full history: list_changes · trend: quality JSON.
Checks run on what our credential-free, read-only probes observe; tools are never called and no code audit is performed. How it is computed.
+repository +namespace-matches-repo +website +reachable +uptime-100% +updated-6d-ago
Derived from observable signals (official registry feed and our own credential-free probes); no code audit performed. How it is computed.
[email protected] npmthis version is not known to the dependency resolver
Dependency graphs from deps.dev; advisories from OSV.dev, including the GitHub Advisory Database and the PyPI Advisory Database; all CC BY 4.0. The graph is what a clean install of this version resolves today; nothing was installed or run. How it is checked.
| remote | auth | reachable | uptime 30d | p50 | protocol | last ok |
|---|---|---|---|---|---|---|
https://tailwindshades.bourhaouta.com/mcp streamable-http | none | yes | 100% | 276 ms | 2026-07-28 | 2026-10-19 |
| package | registry | version | runtime | secrets |
|---|---|---|---|---|
tailwindshades-mcp | npm | 1.6.0 | npx |
convert_colorread-only | Converts any CSS color to oklch(), hex and rgb, formatted like Tailwind (oklch() is what Tailwind v4 uses). Colors outside a format are mapped into it: oklch() to Display P3 like Tailwind's palette, hex and rgb to sRGB. Use it for one value; to add a color with all its shades, call generate_palette instead. |
find_closest_tailwind_colorread-only | 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. |
generate_paletteread-only | 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. |
get_tailwind_paletteread-only | 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. |
list_tailwind_colorsread-only | Lists the names of Tailwind's default colors for a Tailwind version (e.g. red, slate, mauve in v4), with the shades each one has and its 500 value as a sample. Use it to see which colors exist before calling get_tailwind_palette or picking a utility class. |
Schemas: list_tools.
{
"name": "io.github.bourhaouta/tailwindshades",
"icons": [
{
"src": "https://raw.githubusercontent.com/bourhaouta/vscode-tailwindshades/main/media/icon.png",
"sizes": [
"256x256"
],
"mimeType": "image/png"
},
{
"src": "https://tailwindshades.bourhaouta.com/icon.svg",
"sizes": [
"any"
],
"mimeType": "image/svg+xml"
}
],
"title": "Tailwind Shades",
"$schema": "https://static.modelcontextprotocol.io/schemas/2025-12-11/server.schema.json",
"remotes": [
{
"url": "https://tailwindshades.bourhaouta.com/mcp",
"type": "streamable-http"
}
],
"version": "1.6.0",
"packages": [
{
"version": "1.6.0",
"transport": {
"type": "stdio"
},
"identifier": "tailwindshades-mcp",
"runtimeHint": "npx",
"registryType": "npm"
}
],
"repository": {
"url": "https://github.com/bourhaouta/vscode-tailwindshades",
"source": "github",
"subfolder": "packages/mcp"
},
"websiteUrl": "https://tailwindshades.bourhaouta.com",
"description": "Tailwind CSS palettes (50-950) from any color, the closest Tailwind color, and Tailwind's defaults"
}