# converting-css-to-tailwind

Скилл проходит по CSS-файлу и переносит правила в Tailwind-классы прямо в разметке. Полезен при переезде проекта со старого CSS на утилиты.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 423 установки · ★ 866
- Автор: spencerpauly
- Лицензия: CC0-1.0 · policy=mirror · лицензия открытая, файл — в исходнике
- Исходник: https://github.com/spencerpauly/awesome-cursor-skills/tree/HEAD/resources/converting-css-to-tailwind/SKILL.md
- Обновлён: 2026-08-02
- HTML: https://affpapa.org/nevibecode/skills/converting-css-to-tailwind

## Что делает

Скилл работает по шагам: сначала читает CSS-файл и составляет список правил, потом находит разметку, которая ссылается на каждый селектор, переводит свойства в утилиты, удаляет отработанные правила и в конце проверяет, что страница выглядит так же. Разметку он ищет в HTML, JSX, TSX, Vue и Svelte.

Внутри лежит таблица соответствий: `display: flex` → `flex`, `gap: 16px` → `gap-4`, `padding: 16px` → `p-4`, `font-size: 14px` → `text-sm`, `border-radius: 8px` → `rounded-lg`. Медиазапросы превращаются в префиксы `sm:`, `md:`, `lg:`, `xl:`, `2xl:`, состояния — в `hover:`, `focus:`, `active:`, `disabled:`, `first:`, `last:`, `odd:`, `even:`, `group-hover:`, `peer-checked:`. Для переходов и анимаций тоже есть готовые классы вроде `transition-all duration-200 ease-in-out` и `animate-spin`.

Часть CSS перенести не выйдет. Сложные селекторы вида `.parent > .child + .sibling` придётся перестраивать в разметке, `@font-face` остаётся в глобальном файле, а кастомные `@keyframes` и CSS-переменные уезжают в `tailwind.config.ts`. Если в проекте есть тема, скилл советует брать семантические классы (`bg-primary`) вместо произвольных hex-значений. И `@apply` он использовать не велит: воссоздавать через него тот же CSS — значит вернуться к тому, от чего уходили.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill converting-css-to-tailwind -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill converting-css-to-tailwind -a codex
```

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

### Cursor

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

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install spencerpauly/awesome-cursor-skills converting-css-to-tailwind
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill converting-css-to-tailwind -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/spencerpauly/awesome-cursor-skills --path resources/converting-css-to-tailwind
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill converting-css-to-tailwind -a opencode
```

### Claude.ai

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

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

## Когда брать
- перевести старую таблицу стилей на Tailwind-утилиты
- найти разметку, которая ссылается на каждый CSS-селектор
- переписать медиазапросы в брейкпоинты `md:` и `lg:`
- заменить ховеры и прочие состояния на префиксы `hover:` и `focus:`
- вынести кастомные `@keyframes` и переменные в `tailwind.config.ts`

## Примеры запросов агенту
- возьми `styles/card.css` и перенеси все правила в Tailwind-классы в разметке
- переведи медиазапросы из `layout.css` в брейкпоинты Tailwind
- проверь, что после переноса CSS страница выглядит так же, и покажи, где остались сложные селекторы

## Похожие
- [tailwind-css](https://affpapa.org/nevibecode/skills/manutej-tailwind-css.md) — скилл · 461 установка
- [tailwind-ui-refactor](https://affpapa.org/nevibecode/skills/tailwind-ui-refactor.md) — скилл · 458 установок
- [tailwind-refactor](https://affpapa.org/nevibecode/skills/tailwind-refactor.md) — скилл · 308 установок
- [tailwind-css-patterns](https://affpapa.org/nevibecode/skills/tailwind-css-patterns.md) — скилл · 17700 установок
- [tailwind](https://affpapa.org/nevibecode/skills/pymodel-tailwind.md) — скилл · 512 установок
- [css-animation-creator](https://affpapa.org/nevibecode/skills/css-animation-creator.md) — скилл · 805 установок

Из того же набора: [spencerpauly/awesome-cursor-skills](https://affpapa.org/nevibecode/by/spencerpauly/awesome-cursor-skills.md) — 64 карточки

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