Tailwind CSS Shades: Tailwind palettes and MCP
Tailwind CSS Shades
A Tailwind palette from 50 to 950 for any color: a VS Code extension, a CLI and an MCP server so agents stop guessing shades
- 79 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The server only calculates colors and palettes and does not touch project files
- The remote server receives colors from requests and has no other project data
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/tailwind-css-shadesDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The server only calculates colors and palettes and does not touch project files
- The remote server receives colors from requests and has no other project data
This is third-party code. Review the repository files before installing.
What it does
Tailwind CSS Shades builds a full Tailwind palette from 50 to 950 from any color: `#db4d53`, `rgb(…)`, `hsl(…)`, `oklch(…)` or a CSS name. It works with Tailwind versions 4, 3, 2 and 1. The VS Code and Open VSX extension runs from a shortcut, hints at the closest Tailwind color and writes the palette: for version 4 into an `@theme` block with `--color-brand-50` variables. Besides the extension there is a console utility `npx tailwindshades-cli` and an MCP server `tailwindshades-mcp` with identical palettes. For agents it offers five tools: `generate_palette` builds a palette for the project's Tailwind version, `find_closest_tailwind_color` finds the nearest class, `get_tailwind_palette` returns Tailwind's default colors as the framework itself defines them, `list_tailwind_colors` lists the names and `convert_color` converts a color to oklch, hex and rgb. There is also the `add_brand_color` prompt. A remote server is available at `https://tailwindshades.bourhaouta.com/mcp` with nothing to install.
Who it is for. Frontend developers and designers on Tailwind who need a brand color with a full scale, and agents that would otherwise add a single `--color-brand` line.
Good fit when
- You need to add a brand color to the Tailwind theme with all its shades at once
- You need to learn which Tailwind class is closest to a given color
- An agent needs exact default color values with no guessing
- Colors must be converted to oklch for Tailwind version 4
Not a fit when
- You need a palette for another framework: the tool builds Tailwind scales from 50 to 950
- You need a full design system selection with contrasts and themes: the server only builds palettes and converts colors
- You want to pick colors by eye in a graphical editor: the website tailwindshades.bourhaouta.com does that
Example request
Add a brand color #db4d53 with a full palette to my Tailwind theme and tell me which default color is closest.MCP
- Transport
- http, stdio
- Authentication
- not required
Limitations
The server offers five tools and one prompt and does not choose colors for you: a person or an agent must supply the source color. Palettes are built by the same code as in the extension for the chosen Tailwind version, so the version must be set correctly.
The remote server is hosted by the author at tailwindshades.bourhaouta.com, and requests with colors go to it. A local run is possible through the `tailwindshades-mcp` package. The VS Code extension needs an editor with Marketplace or Open VSX support.
How to disable. Remove the server with `claude mcp remove tailwindshades` and the extension through the VS Code extensions menu. The `npx tailwindshades-cli` utility installs nothing permanently.
FAQ
How do I connect Tailwind Shades to Claude Code?
Run `claude mcp add --transport http --scope user tailwindshades https://tailwindshades.bourhaouta.com/mcp`. Nothing needs installing.
Which Tailwind versions are supported?
Versions 4, 3, 2 and 1. For version 4 the palette is written into `@theme` in oklch format.
Which color formats are accepted?
`#hex`, `rgb(…)`, `hsl(…)`, `oklch(…)` and CSS color names.
Is there a command-line version?
Yes, `npx tailwindshades-cli "#db4d53" --name brand`, with output to stdout or to a file via `-o css`.
What is the license?
MIT.
Discussion
No questions or reviews yet.
Related
MCP servers27 oxlint rules for Tailwind CSS v4 plus a skill and a Claude Code plugin: class typos, conflicts and deprecated utilities.
21st.dev MCP server and plugin: search ready React/Tailwind components and logos and generate UI from your agent
designlang
designlang (design-extract)
A CLI and MCP server that reads a live website and pulls out its design system: DTCG tokens, a Tailwind config, Figma variables and a brand book
A skill for the OKLCH color space: hex, rgb and hsl conversion, 9-step palettes, APCA and WCAG contrast, P3 and Tailwind v4.
color-space MCP server: verified color conversions across 221 spaces, gamut, CSS, LUTs and shaders for an agent
Preline UI skills for agents: assemble Tailwind CSS component interfaces and generate themes from tokens
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| Tailwind CSS Shades: Tailwind palettes and MCP (this card) | no | not required | 79 | |
| Color Expert | no | 656 | a color theory and choice skill that does not build Tailwind scales | |
| oxlint-tailwindcss | no | 108 | a linter for Tailwind classes in code |
README in short
The project docs describe the extension: picking a color, shortcuts and the format for different Tailwind versions. Below come the console utility, the website, the MCP server with five tools and setup for Claude Code, Cursor and VS Code, and license details.