Tailwind CSS Shades — палитры Tailwind и MCP
Tailwind CSS Shades
Палитра Tailwind от 50 до 950 из любого цвета: расширение для VS Code, CLI и MCP-сервер, чтобы агенты не гадали оттенки
- 79 ★ репозитория
- Последний коммит
Минимальный доступ
Почему такой уровень
- Сервер только считает цвета и палитры и не обращается к файлам проекта
- Удаленный сервер получает цвета из запросов, других данных проекта у него нет
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add mcp/tailwind-css-shadesОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Сервер только считает цвета и палитры и не обращается к файлам проекта
- Удаленный сервер получает цвета из запросов, других данных проекта у него нет
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Tailwind CSS Shades строит полную палитру Tailwind от 50 до 950 из любого цвета: `#db4d53`, `rgb(…)`, `hsl(…)`, `oklch(…)` или имени CSS. Работает с Tailwind версий 4, 3, 2 и 1. Расширение для VS Code и Open VSX вызывается сочетанием клавиш, подсказывает ближайший цвет Tailwind и записывает палитру: для четвертой версии в блок `@theme` с переменными `--color-brand-50`. Кроме расширения есть консольная утилита `npx tailwindshades-cli` и MCP-сервер `tailwindshades-mcp` с одинаковыми палитрами. Агентам он дает пять инструментов: `generate_palette` строит палитру под версию Tailwind проекта, `find_closest_tailwind_color` находит ближайший класс, `get_tailwind_palette` возвращает стандартные цвета Tailwind как их задает сам фреймворк, `list_tailwind_colors` перечисляет названия, а `convert_color` переводит цвет в oklch, hex и rgb. Есть и подсказка `add_brand_color`. Удаленный сервер доступен по адресу `https://tailwindshades.bourhaouta.com/mcp` без установки.
Для кого. Фронтенд-разработчикам и дизайнерам на Tailwind, которым нужен фирменный цвет с полной шкалой, и агентам, которые иначе добавляют одну строку `--color-brand`.
Подходит, если
- В тему Tailwind нужно добавить цвет бренда сразу со всеми оттенками
- Требуется понять, какому классу Tailwind ближе всего заданный цвет
- Агенту нужны точные значения стандартных цветов без догадок
- Цвета надо перевести в oklch для Tailwind четвертой версии
Не подходит, если
- Нужна палитра для другого фреймворка: инструмент строит шкалы Tailwind от 50 до 950
- Нужен полный подбор дизайн-системы с контрастами и темами: сервер только строит палитры и конвертирует цвета
- Вы хотите выбирать цвета на глаз в графическом редакторе: для этого есть сайт tailwindshades.bourhaouta.com
Пример запроса к агенту
Добавь в мою тему Tailwind цвет бренда #db4d53 с полной палитрой и скажи, какой стандартный цвет к нему ближе всего.MCP
- Транспорт
- http, stdio
- Авторизация
- не нужна
Ограничения
Сервер дает пять инструментов и одну подсказку и не выбирает цвета за вас: задавать исходный цвет должен человек или агент. Палитры строятся тем же кодом, что и в расширении, для выбранной версии Tailwind, поэтому версию надо указать правильно.
Удаленный сервер размещен автором на tailwindshades.bourhaouta.com, и запросы с цветами идут на него. Локальный запуск возможен через пакет `tailwindshades-mcp`. Для расширения VS Code нужен редактор с поддержкой Marketplace или Open VSX.
Как отключить. Удалите сервер командой `claude mcp remove tailwindshades`, а расширение через меню расширений VS Code. Утилита `npx tailwindshades-cli` ничего не устанавливает постоянно.
Частые вопросы
Как подключить Tailwind Shades к Claude Code?
Выполните `claude mcp add --transport http --scope user tailwindshades https://tailwindshades.bourhaouta.com/mcp`. Устанавливать ничего не нужно.
Какие версии Tailwind поддерживаются?
Версии 4, 3, 2 и 1. Для четвертой версии палитра записывается в `@theme` в формате oklch.
Какие форматы цвета принимаются?
`#hex`, `rgb(…)`, `hsl(…)`, `oklch(…)` и имена цветов CSS.
Есть ли консольная версия?
Да, `npx tailwindshades-cli "#db4d53" --name brand`, результат уходит в stdout или в файл через `-o css`.
Какая лицензия?
MIT.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
MCP-серверы27 правил oxlint для Tailwind CSS v4 плюс скилл и плагин Claude Code: опечатки в классах, конфликты и устаревшие утилиты.
MCP-сервер и плагин 21st.dev: поиск готовых React/Tailwind компонентов, логотипов и генерация интерфейса прямо из агента
designlang
designlang (design-extract)
CLI и MCP-сервер, который читает готовый сайт и достает из него дизайн-систему: токены DTCG, конфиг Tailwind, переменные Figma и брендбук
Скилл по цветовому пространству OKLCH: перевод цветов, палитры на 9 ступеней, контраст APCA и WCAG, гамма P3 и Tailwind v4.
MCP-сервер color-space: проверенные преобразования цвета между 221 пространством, гамут, CSS, LUT и шейдеры для агента
Скиллы Preline UI для агентов: сборка интерфейсов из компонентов Tailwind CSS и генерация тем по токенам
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| Tailwind CSS Shades — палитры Tailwind и MCP (эта карточка) | нет | не нужна | 79 | |
| Color Expert | нет | 656 | скилл про теорию и выбор цвета без построения шкал Tailwind | |
| oxlint-tailwindcss | нет | 108 | линтер классов Tailwind в коде |
Коротко о README
Документация проекта описывает расширение: выбор цвета, сочетания клавиш, формат для разных версий Tailwind. Ниже идут консольная утилита, сайт, MCP-сервер с пятью инструментами и подключением для Claude Code, Cursor и VS Code, а также данные о лицензии.