Tailwind Shades

tailwindshades-mcp

AI エージェントに本物の Tailwind CSS パレットを提供し、シェードを推測しなくて済むようにする MCP サーバーです。Tailwind v4、v3、v2、v1 に対応しています。

エージェントに 「テーマにブランドカラー #db4d53 を追加して」 と頼むと、プロジェクトの Tailwind 形式で 50 から 950 までのパレットを書き込み、brand-500 が正確に #db4d53 になります。Tailwind Shades エディター拡張機能および tailwindshades.bourhaouta.com と同じエンジンを使用しています。

セットアップ

リモート（インストール不要）

エージェントを https://tailwindshades.bourhaouta.com/mcp に接続します（Streamable HTTP、API キー不要）。

Claude Code

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

Cursor（~/.cursor/mcp.json、またはプロジェクト内の .cursor/mcp.json）

{
  "mcpServers": {
    "tailwindshades": { "url": "https://tailwindshades.bourhaouta.com/mcp" }
  }
}

VS Code（.vscode/mcp.json）

{
  "servers": {
    "tailwindshades": { "type": "http", "url": "https://tailwindshades.bourhaouta.com/mcp" }
  }
}

ローカル（stdio）

npx を使ってマシン上で実行されるため、外部にデータが送信されることはありません。Node.js 20 以降が必要です。

Claude Code

claude mcp add --scope user tailwindshades -- npx -y tailwindshades-mcp

Cursor（~/.cursor/mcp.json、またはプロジェクト内の .cursor/mcp.json）

{
  "mcpServers": {
    "tailwindshades": { "command": "npx", "args": ["-y", "tailwindshades-mcp"] }
  }
}

VS Code（.vscode/mcp.json）

{
  "servers": {
    "tailwindshades": { "command": "npx", "args": ["-y", "tailwindshades-mcp"] }
  }
}

その他のエージェント：上記の URL を使うか、stdio サーバーとして npx -y tailwindshades-mcp を実行してください。MCP Registry にも io.github.bourhaouta/tailwindshades として登録されています。

ツール

5 つのツールはすべて読み取り専用です。

generate_palette

1 色から、すぐに貼り付けられる完全なパレットを生成します。

入力	デフォルト
color	必須：任意の CSS カラー（#db4d53、rgb()、hsl()、oklch()、色名）
name	最も近い Tailwind カラー。Tailwind 独自のパレットを置き換えるため、ツールが警告します
tailwindVersion	4（3、2、1 も指定可能）
format	v4 では oklch、それ以前では hex（rgb も指定可能）
output	v4 では theme、それ以前では config（css のほか、v4 では live と shopify も指定可能）
plain、semantic	false：live または shopify の場合、@theme の代わりにプレーンな :root ブロックを出力し、--color-<name>-foreground を追加します

live は、ユーザー、テナント、CMS 設定など、実行時に選択される色のための機能です。すべてのシェードが 1 つの変数に従う CSS を、ブラウザーで再構築します。shopify は Shopify テーマ向けに、テーマエディターでマーチャントが色を選択できるカラー設定と Liquid の行を追加します。実行時に選択される色をご覧ください。

コードに加えて、シェード、入力色を含むシェード、最も近い Tailwind カラーを構造化データとして返します。

コードの先頭には、WCAG AA（4.5:1）に適合するテキストと背景のクラスの組み合わせをコメントとして記載します。実際のシェードで検証済みです。エージェントはボタンやテキストにこれらを使うため、赤いブランドカラーには、適合しない bg-brand-500 text-white ではなく bg-brand-600 text-white が選ばれます。

/* Readable pairs (WCAG AA, 4.5:1 or more):
   button     bg-brand-600 text-white      5.09:1
   text       bg-white text-brand-600      5.09:1
   badge      bg-brand-100 text-brand-700  5.43:1
   dark mode  bg-brand-950 text-brand-400  5.33:1
   avoid      bg-brand-500 text-white      4.03:1 */

find_closest_tailwind_color

ある色に最も似て見える Tailwind のシェードを返します。たとえば、#db4d53 → red-500 です。Tailwind の値、色の距離、違いが目視できるかどうかも返します。エージェントは、任意の値ではなく既存のクラスを選ぶときや、カスタムパレットが必要かどうかを判断するときに使用します。

get_tailwind_palette

Tailwind v4、v3、v2、v1 について、Tailwind が定義する標準カラーをそのまま返します。色全体（blue）または 1 つのシェード（slate-500）を指定できます。v4 では値は oklch() 形式で、それ以前では hex 形式です。エージェントは、Tailwind の標準値を記憶に頼って書く代わりに、このツールを使用します。

list_tailwind_colors

バージョンごとの Tailwind 標準カラー名（v4 では mauve、olive、mist、taupe を含む 26 色）と、それぞれのシェード、サンプルとして各色の 500 の値を返します。

convert_color

任意の CSS カラーを、Tailwind 形式の oklch()、hex、rgb に変換します。Tailwind v4 を使用するプロジェクトで、パレット全体ではなく 1 つの oklch() 値が必要な場合に便利です。

プロンプト

add_brand_color

引数は color と、省略可能な name（デフォルトは brand）です。エージェントにプロジェクトの Tailwind のバージョンを調べさせ、generate_palette を呼び出し、コードをテーマに貼り付けるよう指示します。Claude Code などのクライアントでは、スラッシュコマンドとして表示されます。

自分でホストする

このパッケージは、すべてのツールとプロンプトを備えた新しい McpServer を作成する createServer() もエクスポートします。MCP TypeScript SDK を使って、たとえばあらゆるウェブ標準ランタイムで HTTP 経由で提供できます（上記のリモートサーバーは Next.js のルートとしてこの方法で実行されています）。

import { createMcpHandler } from '@modelcontextprotocol/server'
import { createServer } from 'tailwindshades-mcp'

const handler = createMcpHandler(createServer)

export const POST = (request: Request) => handler.fetch(request)

詳細

• tailwindshades-cli：コマンドラインから同じパレットを利用できます
• ソースコードと課題

ライセンス

MIT © Omar Bourhaouta