# tailwind-refactor

Скилл для рефакторинга классов Tailwind CSS: миграция с v3 на v4, замена устаревших утилит и чистка кода без изменения внешнего вида.

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

## Что делает

Скилл собирает 50 правил по восьми категориям, отсортированным по срочности миграции. Начинается всё с конфигурации: замена `@tailwind` на `@import`, перенос `tailwind.config.js` в CSS-блок `@theme`, переход на `@tailwindcss/postcss`. Дальше идут устаревшие утилиты, переименования вроде `bg-gradient-*` на `bg-linear-*`, консолидация классов и чистка произвольных значений.

Каждое преобразование сохраняет текущий вид интерфейса. Скилл трогает только синтаксис и совместимость с v4, поэтому визуальные правки он не делает — для этого в наборе есть соседние скиллы `tailwind-ui-refactor` и `tailwind-responsive-ui`.

Перед ручной миграцией автор советует прогнать `npx @tailwindcss/upgrade`: автоматический инструмент закрывает большую часть конфигурации и переименований, а скилл добирает то, что он пропустил. Без этого шага вы будете разбирать вручную то, что уже сделано за вас.

## Установка

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

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

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add pproenca/dot-skills --skill tailwind-refactor -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add pproenca/dot-skills --skill tailwind-refactor -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install pproenca/dot-skills tailwind-refactor
```

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add pproenca/dot-skills --skill tailwind-refactor -a opencode
```

### Claude.ai

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

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

## Когда брать
- перевести проект с Tailwind CSS v3 на v4
- убрать устаревшие утилиты вроде `flex-shrink` и `overflow-ellipsis`
- сократить длинные цепочки классов через `size-*` и `inset-*`
- заменить произвольные hex-цвета на токены темы
- вынести разросшиеся блоки `@apply` из CSS

## Примеры запросов агенту
- Прогони tailwind-refactor по компонентам в `src/components` и покажи, что поменялось
- Проверь этот файл на устаревшие утилиты Tailwind и замени их на актуальные
- Собери план миграции на Tailwind v4 для этого проекта, начни с конфигурации

## Похожие
- [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](https://affpapa.org/nevibecode/skills/pymodel-tailwind.md) — скилл · 512 установок
- [tailwind-4-docs](https://affpapa.org/nevibecode/skills/tailwind-4-docs.md) — скилл · 17600 установок
- [tailwind-patterns](https://affpapa.org/nevibecode/skills/tailwind-patterns.md) — скилл · 2720 установок
- [frontend-tailwind-best-practices](https://affpapa.org/nevibecode/skills/frontend-tailwind-best-practices.md) — скилл · 464 установки

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

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

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