# tailwindcss-fundamentals-v4

Скилл по Tailwind CSS v4: установка, CSS-first настройка через @theme, миграция с v3 и новые утилиты. Пригодится, когда проект переезжает на v4.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 389 установок · ★ 59
- Автор: JosiahSiegel
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/JosiahSiegel/claude-plugin-marketplace/tree/HEAD/plugins/tailwindcss-master/skills/tailwindcss-fundamentals-v4/SKILL.md
- Обновлён: 2026-06-18
- HTML: https://affpapa.org/nevibecode/skills/tailwindcss-fundamentals-v4

## Что делает

Скилл даёт агенту справочник по Tailwind CSS v4.0, вышедшему 22 января 2025 года: установка через Vite-плагин, PostCSS или CLI, конфигурация прямо в CSS через `@theme`, синтаксис `@import "tailwindcss"`. Внутри — чек-лист миграции с v3, каталог новых утилит (`text-shadow`, `mask-*`, container queries) и примеры `@utility` с `@variant`.

Устроено это как набор инструкций и примеров, а не как исполняемый код: агент читает их и подсказывает, что писать в `app.css` и конфигах сборщика. Отдельно разобраны отличия v4 от v3 — движок на Rust вместо Node.js, цвета в OKLCH, встроенные Autoprefixer и CSS nesting, автоматическое определение контента вместо явного списка путей. Поэтому `tailwind.config.js` из старого проекта в v4 просто не нужен.

Важный момент: скилл покрывает именно v4. Если проект сидит на v3 и переезд не планируется, подсказки про `@theme` и `var(--color-*)` вместо `theme()` будут мимо — это повод проверить версию до установки.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add JosiahSiegel/claude-plugin-marketplace --skill tailwindcss-fundamentals-v4 -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add JosiahSiegel/claude-plugin-marketplace --skill tailwindcss-fundamentals-v4 -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add JosiahSiegel/claude-plugin-marketplace --skill tailwindcss-fundamentals-v4 -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install JosiahSiegel/claude-plugin-marketplace tailwindcss-fundamentals-v4
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add JosiahSiegel/claude-plugin-marketplace --skill tailwindcss-fundamentals-v4 -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/JosiahSiegel/claude-plugin-marketplace --path plugins/tailwindcss-master/skills/tailwindcss-fundamentals-v4
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add JosiahSiegel/claude-plugin-marketplace --skill tailwindcss-fundamentals-v4 -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/JosiahSiegel/claude-plugin-marketplace/tree/HEAD/plugins/tailwindcss-master/skills/tailwindcss-fundamentals-v4/SKILL.md

## Когда брать
- поставить Tailwind v4 в проект на Vite
- перевести конфиг с `tailwind.config.js` на `@theme` в CSS
- пройти миграцию с v3 на v4 по чек-листу
- добавить свою утилиту через `@utility`
- настроить кастомный вариант вроде `hocus` или `data-loading`

## Примеры запросов агенту
- Помоги установить Tailwind v4 в проект на Vite и подключить плагин в `vite.config.js`
- Перенеси мои цвета и шрифты из `tailwind.config.js` в блок `@theme`
- Составь чек-лист миграции с Tailwind v3 на v4 для этого проекта

## Похожие
- [tailwindcss](https://affpapa.org/nevibecode/skills/tailwindcss.md) — скилл · 1700 установок
- [tailwind](https://affpapa.org/nevibecode/skills/pymodel-tailwind.md) — скилл · 512 установок
- [tailwindcss-development](https://affpapa.org/nevibecode/skills/tailwindcss-development.md) — скилл · 942 установки
- [unocss](https://affpapa.org/nevibecode/skills/unocss.md) — скилл · 16100 установок
- [tailwind-v4-shadcn](https://affpapa.org/nevibecode/skills/tailwind-v4-shadcn.md) — скилл · 8100 установок
- [tailwind-theme-builder](https://affpapa.org/nevibecode/skills/tailwind-theme-builder.md) — скилл · 3200 установок

Из того же набора: [josiahsiegel/claude-plugin-marketplace](https://affpapa.org/nevibecode/by/josiahsiegel/claude-plugin-marketplace.md) — 11 карточек

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

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