tailwind-css · manutej — скилл для Claude Code: утилиты Tailwind в работе
Скилл по Tailwind CSS: утилитарные классы, адаптивность, тёмная тема и оптимизация сборки. Пригодится, когда верстаешь интерфейс и не хочешь прыгать в CSS-файлы.
npx skills add manutej/luxor-claude-marketplace --skill tailwind-css -a claude-codeЧто делает tailwind-css
Скилл даёт агенту справочник по Tailwind CSS: layout, отступы, типографика, цвета, границы и скругления. Каждый раздел — короткие примеры разметки с классами, так что агент подставляет готовые комбинации вместо того, чтобы выдумывать имена утилит.
Внутри один файл SKILL.md с описанием и примерами. Отдельных скриптов или зависимостей в нём нет, поэтому установка сводится к копированию файла в папку скиллов выбранной платформы. Для Claude это ~/.claude/skills/tailwind-css/SKILL.md, для Cursor — .cursor/skills/tailwind-css/SKILL.md, для GitHub Copilot — .github/skills/tailwind-css/SKILL.md.
Скилл описывает Tailwind как таковой, а не конкретную версию фреймворка. Если в проекте Tailwind ещё не настроен, классы из примеров просто не дадут стилей — сначала поставь и сконфигурируй сам фреймворк. Текст описания обрезан, поэтому про интеграцию с React, Vue, Svelte и Next.js сказано только в общем виде.
Какие задачи решает
- собрать адаптивную сетку без отдельного CSS-файла
- добавить тёмную тему через класс
dark: - вынести повторяющиеся классы в компонент
- настроить свои токены вместо дефолтной палитры
- уменьшить итоговый CSS перед продакшеном
Примеры запросов агенту
- Собери карточку товара на Tailwind с сеткой из трёх колонок и отступами
- Добавь тёмную тему к этой форме через
dark: - Покажи, как вынести эти классы в переиспользуемый компонент
Как установить tailwind-css
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill tailwind-css -a claude-code2Вручную: положить файлы
~/.claude/skills/tailwind-css/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/tailwind-css/
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill tailwind-css -a codex2Вручную: положить файлы
.agents/skills/tailwind-css/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill tailwind-css -a cursor2Вручную: положить файлы
.cursor/skills/tailwind-css/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install manutej/luxor-claude-marketplace tailwind-css2Вручную: положить файлы
.github/skills/tailwind-css/SKILL.md1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill tailwind-css -a gemini-cli2Командой платформы
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-frontend-essentials/skills/tailwind-cssВручную: положить файлы
.devin/skills/tailwind-css/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill tailwind-css -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора31
Другие версии tailwind-css
Похожие
Рядом в теме «Фронтенд и UI»
Всё по теме «Фронтенд и UI» →Вопросы о tailwind-css
Как установить tailwind-css в Claude?
Выполни npx skills add manutej/luxor-claude-marketplace --skill tailwind-css -a claude-code. Файл появится по пути ~/.claude/skills/tailwind-css/SKILL.md.
Что делает скилл tailwind-css?
Даёт агенту справочник по утилитам Tailwind: layout, отступы, типографика, цвета, границы. Плюс примеры адаптивных вариантов и тёмной темы.
Нужно ли что-то ставить до этого скилла?
Сам скилл — это один файл с примерами. Чтобы классы работали, Tailwind CSS должен быть настроен в проекте.
