tailwind-patterns — скилл для Claude Code: правила Tailwind CSS v4
Скилл для Claude, который задаёт агенту правила Tailwind CSS v4: конфигурация в CSS, контейнерные запросы, архитектура токенов. Пригодится тем, кто пишет интерфейс на утилитах.
npx claude-code-templates@latest --skill creative-design/tailwind-patternsЧто делает tailwind-patterns
Скилл описывает, как устроен Tailwind v4, и подсказывает агенту, какие приёмы использовать в вёрстке. Конфигурация переехала в CSS: директива @theme вместо tailwind.config.js, все токены доступны как переменные --*. Компилятор Oxide написан на Rust, режим JIT работает постоянно, вложенность CSS нативная — PostCSS для неё больше не нужен. Директива @apply ещё работает, но в правилах скилла её относят к нежелательным.
Внутри — разбор контейнерных запросов: @container на родителе и @sm:, @md:, @lg: на детях, плюс именованные контейнеры вида @container/card. Для страницы берут брейкпоинты вьюпорта, для переиспользуемого компонента — контейнерные запросы, потому что такой компонент не зависит от контекста. Есть таблицы по тёмной теме (class, media, selector), сеткам, шкале типографики, анимациям и переходам. Цвета советует держать в OKLCH и раскладывать по слоям: примитив, семантическое имя, компонентное.
Отдельный раздел — анти-паттерны. Произвольные значения вместо шкалы, !important, инлайновый style=, длинные дублирующиеся списки классов, смесь конфига v3 с v4 — всё это скилл помечает как то, что ломает поддержку. Скиллу разрешены инструменты Read, Write, Edit, Glob, Grep, то есть он читает и правит файлы проекта. Установка идёт через npx claude-code-templates@latest --skill creative-design/tailwind-patterns, файл скилла ложится в ~/.claude/skills/tailwind-patterns/SKILL.md.
Какие задачи решает
- перевести проект с
tailwind.config.jsна@themeв CSS - сделать компонент отзывчивым без привязки к ширине вьюпорта
- разложить цвета по слоям: примитив, семантика, компонент
- выбрать между брейкпоинтом и контейнерным запросом
- найти в вёрстке анти-паттерны вроде
!importantи инлайновых стилей
Примеры запросов агенту
- Перепиши конфиг Tailwind на
@themeв CSS и вынеси цвета в семантические токены - Сделай карточку отзывчивой через
@container, а не черезmd: - Проверь этот компонент на анти-паттерны Tailwind v4 и покажи, что исправить
Как установить tailwind-patterns
1Через claude-code-templates
npx claude-code-templates@latest --skill creative-design/tailwind-patterns2Через Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill tailwind-patterns -a claude-code3Вручную: положить файлы
~/.claude/skills/tailwind-patterns/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/tailwind-patterns/
Вручную: положить файлы
.agents/skills/tailwind-patterns/SKILL.mdДля всех проектов — ~/.agents/skills/
Вручную: положить файлы
.cursor/skills/tailwind-patterns/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates tailwind-patterns2Вручную: положить файлы
.github/skills/tailwind-patterns/SKILL.mdКомандой платформы
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/creative-design/tailwind-patternsВручную: положить файлы
.devin/skills/tailwind-patterns/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о tailwind-patterns
Как установить tailwind-patterns в Claude?
Выполните npx claude-code-templates@latest --skill creative-design/tailwind-patterns. Скилл появится в ~/.claude/skills/tailwind-patterns/SKILL.md.
Что делает скилл tailwind-patterns?
Задаёт агенту правила Tailwind CSS v4: конфигурацию через @theme, контейнерные запросы, тёмную тему, сетки, шкалу типографики и архитектуру токенов. Плюс список анти-паттернов, которых стоит избегать.
Чем v4 отличается от v3 в этом скилле?
Конфигурация переезжает из tailwind.config.js в CSS-директиву @theme, компилятор Oxide заменяет PostCSS-плагин, вложенность CSS становится нативной. Смешивать конфиг v3 с v4 скилл не советует.
