Skip to content

Tailwind Shades

by bourhaouta · remote · local (npm) · no sign-in to list tools · v1.6.0 · published by GitHub user bourhaouta

Tailwind CSS palettes (50-950) from any color, the closest Tailwind color, and Tailwind's defaults

Changes · 2
CompareRegistry entry

5 tools: 2 change things and 3 only read.

Scanned Oct 21, 2026

2 checks matched something in the tool definitions. No finding is not a safety guarantee. How the checks work.

claude mcp add --transport http tailwindshades https://tailwindshades.bourhaouta.com/mcp

Findings

Matches of fixed checks, with the text they matched.

2 warn
  • Warngenerate_palette

    The server marks "generate_palette" read-only (readOnlyHint: true), and its own name, description or input give the class "write".

    Matched text

    annotations: {"readOnlyHint":true,"idempotentHint":true,"openWorldHint":false}; The name "generate_palette" says "generate": a word for a change.

    What this check looks for
  • Warnconvert_color

    The server marks "convert_color" read-only (readOnlyHint: true), and its own name, description or input give the class "write".

    Matched text

    annotations: {"readOnlyHint":true,"idempotentHint":true,"openWorldHint":false}; The name "convert_color" says "convert": a word for a change.

    What this check looks for

Tools

Open a tool for its reasons and full description. Descriptions are the publisher's own words, shown as they are.

5 tools

Changes things 2Claude Code: ask
  • convert_colorConverts any CSS color to oklch(), hex and rgb, formatted like Tailwind (oklch() is what Tailwind v4 uses).1 finding

    Why it is in this group

    • The name "convert_color" says "convert": a word for a change.
    • The server marks it read-only (readOnlyHint: true), but an annotation never lowers a class.

    Findings

    • Warn

      The server marks "convert_color" read-only (readOnlyHint: true), and its own name, description or input give the class "write".

      Matched text

      annotations: {"readOnlyHint":true,"idempotentHint":true,"openWorldHint":false}; The name "convert_color" says "convert": a word for a change.

      What this check looks for
    Description, as the server wrote it
    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.

    Annotations the server declares

    • readOnlyHint: true
    • idempotentHint: true
    • openWorldHint: false
  • generate_paletteGenerates a full Tailwind CSS palette (50-950) from one color, ready to paste.1 finding

    Why it is in this group

    • The name "generate_palette" says "generate": a word for a change.
    • The server marks it read-only (readOnlyHint: true), but an annotation never lowers a class.

    Findings

    • Warn

      The server marks "generate_palette" read-only (readOnlyHint: true), and its own name, description or input give the class "write".

      Matched text

      annotations: {"readOnlyHint":true,"idempotentHint":true,"openWorldHint":false}; The name "generate_palette" says "generate": a word for a change.

      What this check looks for
    Description, as the server wrote it
    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.

    Annotations the server declares

    • readOnlyHint: true
    • idempotentHint: true
    • openWorldHint: false
Only reads 3Claude Code: allow
  • find_closest_tailwind_colorFinds the shade in Tailwind's default palette that looks most like a given color, e.g.No findings

    Why it is in this group

    • The name "find_closest_tailwind_color" says "find": a word for reading.
    Description, as the server wrote it
    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.

    Annotations the server declares

    • readOnlyHint: true
    • idempotentHint: true
    • openWorldHint: false
  • get_tailwind_paletteLooks up Tailwind's own default colors, exactly as Tailwind defines them: a whole color (e.g.No findings

    Why it is in this group

    • The name "get_tailwind_palette" says "get": a word for reading.
    Description, as the server wrote it
    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.

    Annotations the server declares

    • readOnlyHint: true
    • idempotentHint: true
    • openWorldHint: false
  • list_tailwind_colorsLists the names of Tailwind's default colors for a Tailwind version (e.g.No findings

    Why it is in this group

    • The name "list_tailwind_colors" says "list": a word for reading.
    Description, as the server wrote it
    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.

    Annotations the server declares

    • readOnlyHint: true
    • idempotentHint: true
    • openWorldHint: false

This is not a safety rating, and no finding is not a safety guarantee. The groups and findings come from fixed checks of the tool definitions the server returned on the date shown, not from its code or what it does when called. How the checks work.

Install

Pinned to version 1.6.0. Values in angle brackets are yours to fill in.

claude mcp add --transport http tailwindshades https://tailwindshades.bourhaouta.com/mcp

Run in a terminal.

Claude Code permissions

Allow the reads, ask before a change, deny the deletes. Paste into .claude/settings.json.

.claude/settings.json
{
  "permissions": {
    "allow": [
      "mcp__tailwindshades__find_closest_tailwind_color",
      "mcp__tailwindshades__get_tailwind_palette",
      "mcp__tailwindshades__list_tailwind_colors"
    ],
    "ask": [
      "mcp__tailwindshades__generate_palette",
      "mcp__tailwindshades__convert_color"
    ],
    "deny": []
  }
}

Tools that only read are allowed, tools that change things ask first, tools that delete or cancel are denied. It assumes the server is installed as tailwindshades. Review it before you use it.