Tailwind Shades — MCP-сервер для Claude Code: палитры Tailwind
Считает палитры Tailwind от 50 до 950 из любого цвета и подбирает ближайший цвет Tailwind, чтобы агент не выдумывал оттенки.
claude mcp add --transport http tailwindshades https://tailwindshades.bourhaouta.com/mcpЧто делает Tailwind Shades
Сервер отдаёт агенту настоящие палитры Tailwind CSS. Скажите ему добавить фирменный цвет, и он получит полный набор оттенков от 50 до 950 в формате вашего проекта, причём исходный цвет встанет ровно на brand-500. Работает с Tailwind v4, v3, v2 и v1.
Внутри пять инструментов, все только на чтение: generate_palette собирает палитру из одного цвета, find_closest_tailwind_color ищет ближайший стандартный оттенок, get_tailwind_palette возвращает дефолтные цвета Tailwind, list_tailwind_colors перечисляет их названия, convert_color переводит цвет в oklch(), hex и rgb. Есть и промпт add_brand_color: он просит агента определить версию Tailwind в проекте, вызвать generate_palette и вставить код в тему. В Claude такой промпт показывается как слэш-команда.
Подключить можно удалённо по https://tailwindshades.bourhaouta.com/mcp — без API-ключа и без установки. Локальный вариант идёт через npx -y tailwindshades-mcp, ему нужен Node.js 20 или новее, зато ничего не уходит с машины. Без Node.js 20 локальный запуск не поднимется, так что на старой версии берите удалённый адрес.
Какие задачи решает
- собрать палитру оттенков из фирменного цвета
- подобрать ближайший стандартный цвет Tailwind вместо произвольного значения
- взять дефолтные цвета Tailwind, не переписывая их по памяти
- перевести цвет в формат
oklch()для проекта на Tailwind v4 - проверить, какие пары текста и фона проходят WCAG AA
Примеры запросов агенту
- Добавь фирменный цвет #db4d53 в тему проекта
- Сгенерируй палитру Tailwind из #db4d53 для версии 4
- Найди ближайший цвет Tailwind к #db4d53
Как установить Tailwind Shades
1Командой платформы: удалённый сервер
claude mcp add --transport http tailwindshades https://tailwindshades.bourhaouta.com/mcp2Командой платформы
claude mcp add mcp -- npx -y tailwindshades-mcp1Командой платформы: удалённый сервер
codex mcp add mcp --url https://tailwindshades.bourhaouta.com/mcp2Командой платформы
codex mcp add mcp -- npx -y tailwindshades-mcpФайл настроек
{
"mcpServers": {
"mcp": {
"url": "https://tailwindshades.bourhaouta.com/mcp"
}
}
}{
"mcpServers": {
"mcp": {
"command": "npx",
"args": [
"-y",
"tailwindshades-mcp"
]
}
}
}Файл настроек
{
"servers": {
"mcp": {
"type": "http",
"url": "https://tailwindshades.bourhaouta.com/mcp"
}
}
}{
"servers": {
"mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"tailwindshades-mcp"
]
}
}
}1Командой платформы: удалённый сервер
gemini mcp add -t http mcp https://tailwindshades.bourhaouta.com/mcp2Командой платформы
gemini mcp add mcp npx -y tailwindshades-mcpПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о Tailwind Shades
Как установить Tailwind Shades в Claude Code?
Удалённый вариант: claude mcp add --transport http tailwindshades https://tailwindshades.bourhaouta.com/mcp. Локальный: claude mcp add --scope user tailwindshades -- npx -y tailwindshades-mcp.
Что делает Tailwind Shades?
Считает палитры Tailwind от 50 до 950 из любого CSS-цвета, находит ближайший стандартный цвет Tailwind и отдаёт дефолтные палитры для v4, v3, v2 и v1.
Нужен ли API-ключ для Tailwind Shades?
Для удалённого сервера ключ не нужен, подключение идёт по Streamable HTTP. Локальному варианту нужен только Node.js 20 или новее.
