AcademyMCP serversDesign and media

Tailwind CSS Shades

Designers and frontend developers who need consistent color scales for a brand.

Use it nowWant it running at your company?
  • Recommendedour rating
  • 77gitHub stars
  • MITlicence
  • 4 days agolast update

Use it now

Open inClaudeChatGPTGeminiPerplexity
claude mcp add --transport http tailwindshades https://tailwindshades.bourhaouta.com/mcp
Install in CursorInstall in VS CodeOpen the original ↗

Third party software. By copying, downloading or installing it you accept the Academy legal notice: you are responsible for reviewing its code and permissions before use.

README.md

Loading the file...

What it does

Tailwind CSS Shades generates a full Tailwind color palette, from 50 to 950, from any color you choose. It works with Tailwind versions 4, 3, 2 and 1, and it calculates the shades in the OKLCH color space. It can also find the closest Tailwind color to a given color, and it is available as a VS Code extension, a command line tool and an MCP server.

Use cases

  1. 01Create a 50 to 950 scale from a brand color
  2. 02Find the nearest Tailwind color to a client swatch
  3. 03Generate palettes for a project that uses Tailwind v3

Questions about
Tailwind CSS Shades.

What is Tailwind CSS Shades used for?

Designers and frontend developers who need consistent color scales for a brand. Tailwind CSS Shades generates a full Tailwind color palette, from 50 to 950, from any color you choose. It works with Tailwind versions 4, 3, 2 and 1, and it calculates the shades in the OKLCH color space. It can also find the closest Tailwind color to a given color, and it is available as a VS Code extension, a command line tool and an MCP server.

How do I install Tailwind CSS Shades?

Run this in your terminal: claude mcp add --transport http tailwindshades https://tailwindshades.bourhaouta.com/mcp

Is Tailwind CSS Shades open source?

Yes. The code is on GitHub (bourhaouta/vscode-tailwindshades) under the MIT licence.

Is Tailwind CSS Shades safe to use?

It passed our automatic scan for credential theft, hidden instructions and risky install commands. Third party open source software. Sabemos AI does not maintain it. Check the code and permissions before you connect it to company data.

Related resources

Read the guide: AI marketing content systems ↗

  1. 001Algorithmic ArtDesign and marketing teams who want original generative visuals for campaigns, events or web pages.OfficialSkill
  2. 002Canvas DesignDesign and marketing teams who need original posters or visual pieces with a clear aesthetic direction.OfficialSkill
  3. 003Frontend DesignDesign and web teams building landing pages or interfaces that need a distinct visual identity.OfficialSkill
  4. 004Framelink MCP for FigmaDesign and front-end teams that want an AI coding agent to build interfaces from Figma files.RecommendedMCP server · ★ 16k
  5. 005Magic MCP (21st MCP)Design and front-end teams that want an assistant to produce interface components inside their editor.RecommendedMCP server · ★ 6k
  6. 006davinci-resolve-mcpVideo and creative teams that want an AI assistant to help with editing, organizing media and project tasks in DaVinci Resolve.RecommendedMCP server · ★ 3.5k