# tailwind-css

Задаёт правила стилизации Tailwind CSS: запрещает ломать вёрстку старых версий синтаксисом v4, требует проверку сборки и инспекцию DOM.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 3000 установок · ★ 101
- Автор: PaulRBerg
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/PaulRBerg/agent-skills/tree/HEAD/skills/tailwind-css/SKILL.md
- Обновлён: 2026-10-24
- HTML: https://affpapa.org/nevibecode/skills/tailwind-css

## Что делает

Скилл подчиняет агента существующему проекту. Приоритет остаётся за установленной версией Tailwind, токенами, компонентами и точкой входа CSS. Агенту прямо запрещено ставить новые пакеты, менять интеграцию или обновлять фреймворк без отдельного запроса.

Для проектов на Tailwind v4 подключаются правила новой версии. При этом скилл запрещает переносить синтаксис v4 в старые репозитории. Правила для `tailwind-variants`, `tw-animate-css` и `ESLint` учитываются, только если эти зависимости уже есть в коде. Классы обязаны оставаться статически доступными для сканера Tailwind.

Обычной текстовой проверки классов в разметке недостаточно. При изменении маппингов агент обязан запустить сборку и проверить итоговый DOM во вьюпорте. В конце работы он формирует отчёт со статусом `### 🎨 Tailwind — ✅ styling updated` и таблицей проверенных состояний.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add PaulRBerg/agent-skills --skill tailwind-css -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/tailwind-css/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/tailwind-css/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add PaulRBerg/agent-skills --skill tailwind-css -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/tailwind-css/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add PaulRBerg/agent-skills --skill tailwind-css -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/tailwind-css/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install PaulRBerg/agent-skills tailwind-css
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/tailwind-css/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add PaulRBerg/agent-skills --skill tailwind-css -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/PaulRBerg/agent-skills --path skills/tailwind-css
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/tailwind-css/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add PaulRBerg/agent-skills --skill tailwind-css -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/PaulRBerg/agent-skills/tree/HEAD/skills/tailwind-css/SKILL.md

## Когда брать
- обновить стили компонентов без поломки адаптивности и тёмной темы
- перевести конфигурацию и директивы проекта на Tailwind v4
- настроить варианты стилей через tailwind-variants
- проверить скомпилированный DOM и сборку вместо текстовой сверки классов

## Примеры запросов агенту
- Обнови стили карточки товара в каталоге, сохранив поддержку тёмной темы.
- Переведи директивы в CSS на Tailwind v4 и проверь сборку.
- Сделай варианты кнопок с помощью tailwind-variants и проверь рендер во вьюпорте.

## Похожие
- [converting-css-to-tailwind](https://affpapa.org/nevibecode/skills/converting-css-to-tailwind.md) — скилл · 423 установки
- [converting-css-modules-to-tailwind](https://affpapa.org/nevibecode/skills/converting-css-modules-to-tailwind.md) — скилл · 392 установки
- [tailwind-css-patterns](https://affpapa.org/nevibecode/skills/tailwind-css-patterns.md) — скилл · 17700 установок
- [tailwind-design-system](https://affpapa.org/nevibecode/skills/giuseppe-trisciuoglio-tailwind-design-system.md) — скилл · 4500 установок
- [tailwind-4](https://affpapa.org/nevibecode/skills/tailwind-4.md) — скилл · 612 установок
- [css-alpha-masking](https://affpapa.org/nevibecode/skills/css-alpha-masking.md) — скилл · 1500 установок

## Другие версии с тем же именем
- [tailwind-css · manutej](https://affpapa.org/nevibecode/skills/manutej-tailwind-css.md) — 461 установка

Из того же набора: [paulrberg/agent-skills](https://affpapa.org/nevibecode/by/paulrberg/agent-skills.md) — 6 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md