Правила для агента: установка Tailwind v4 через @tailwindcss/vite, конфигурация в CSS через @theme и миграция с v3 без лишних файлов.
Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.
Значения сразу появятся в превью, коде и при копировании.
Ты — frontend-разработчик. Настрой Tailwind CSS v4 в проекте на Vite (или мигрируй с v3). Проект: [React / Vue / Svelte + Vite, TypeScript или JavaScript] Текущее состояние: [чистый проект / Tailwind v3 с tailwind.config.js] Дизайн-токены: [цвета, шрифты, радиусы, если есть] Как устроен Tailwind v4: - Не нужен PostCSS-конфиг при использовании плагина Vite. - Не нужен tailwind.config.js: конфигурация пишется в CSS через @theme. - Официальный плагин @tailwindcss/vite заменяет PostCSS-подход. - Пути к контенту определяются автоматически. Шаги: 1. Установи пакеты: npm install tailwindcss @tailwindcss/vite 2. Добавь плагин tailwindcss() в plugins в vite.config.ts (рядом с плагином фреймворка, например react()). 3. В главном CSS-файле замени всё на одну строку @import "tailwindcss"; — без старых директив @tailwind base/components/utilities. 4. Убедись, что CSS импортируется в точке входа (main.tsx / main.ts). 5. Перенеси токены в блок @theme: --color-primary, --font-sans, --radius-lg и т. п. 6. Свои утилиты оформляй через @utility, свои варианты — через @variant. Миграция с v3: перенеси настройки из tailwind.config.js в @theme и удали файл; удали postcss.config.js, если он был только для Tailwind; удали postcss и autoprefixer, если они больше не нужны; замени директивы на @import. Чего не делать: не создавай tailwind.config.js и postcss.config.js для Tailwind, не используй старые директивы. Если стили не применяются: проверь строку импорта, подключение CSS в точке входа, наличие плагина в конфиге Vite; очисти кэш node_modules/.vite и перезапусти dev-сервер. Формат ответа: команды, итоговые vite.config.ts и CSS-файл целиком, тестовый компонент для проверки и чек-лист проверки.
```text Ты — frontend-разработчик. Настрой Tailwind CSS v4 в проекте на Vite (или мигрируй с v3). Проект: [React / Vue / Svelte + Vite, TypeScript или JavaScript] Текущее состояние: [чистый проект / Tailwind v3 с tailwind.config.js] Дизайн-токены: [цвета, шрифты, радиусы, если есть] Как устроен Tailwind v4: - Не нужен PostCSS-конфиг при использовании плагина Vite. - Не нужен tailwind.config.js: конфигурация пишется в CSS через @theme. - Официальный плагин @tailwindcss/vite заменяет PostCSS-подход. - Пути к контенту определяются автоматически. Шаги: 1. Установи пакеты: npm install tailwindcss @tailwindcss/vite 2. Добавь плагин tailwindcss() в plugins в vite.config.ts (рядом с плагином фреймворка, например react()). 3. В главном CSS-файле замени всё на одну строку @import "tailwindcss"; — без старых директив @tailwind base/components/utilities. 4. Убедись, что CSS импортируется в точке входа (main.tsx / main.ts). 5. Перенеси токены в блок @theme: --color-primary, --font-sans, --radius-lg и т. п. 6. Свои утилиты оформляй через @utility, свои варианты — через @variant. Миграция с v3: перенеси настройки из tailwind.config.js в @theme и удали файл; удали postcss.config.js, если он был только для Tailwind; удали postcss и autoprefixer, если они больше не нужны; замени директивы на @import. Чего не делать: не создавай tailwind.config.js и postcss.config.js для Tailwind, не используй старые директивы. Если стили не применяются: проверь строку импорта, подключение CSS в точке входа, наличие плагина в конфиге Vite; очисти кэш node_modules/.vite и перезапусти dev-сервер. Формат ответа: команды, итоговые vite.config.ts и CSS-файл целиком, тестовый компонент для проверки и чек-лист проверки. ```
{
"messages": [
{
"role": "user",
"content": "Ты — frontend-разработчик. Настрой Tailwind CSS v4 в проекте на Vite (или мигрируй с v3).\n\nПроект: [React / Vue / Svelte + Vite, TypeScript или JavaScript]\nТекущее состояние: [чистый проект / Tailwind v3 с tailwind.config.js]\nДизайн-токены: [цвета, шрифты, радиусы, если есть]\n\nКак устроен Tailwind v4:\n- Не нужен PostCSS-конфиг при использовании плагина Vite.\n- Не нужен tailwind.config.js: конфигурация пишется в CSS через @theme.\n- Официальный плагин @tailwindcss/vite заменяет PostCSS-подход.\n- Пути к контенту определяются автоматически.\n\nШаги:\n1. Установи пакеты: npm install tailwindcss @tailwindcss/vite\n2. Добавь плагин tailwindcss() в plugins в vite.config.ts (рядом с плагином фреймворка, например react()).\n3. В главном CSS-файле замени всё на одну строку @import \"tailwindcss\"; — без старых директив @tailwind base/components/utilities.\n4. Убедись, что CSS импортируется в точке входа (main.tsx / main.ts).\n5. Перенеси токены в блок @theme: --color-primary, --font-sans, --radius-lg и т. п.\n6. Свои утилиты оформляй через @utility, свои варианты — через @variant.\n\nМиграция с v3: перенеси настройки из tailwind.config.js в @theme и удали файл; удали postcss.config.js, если он был только для Tailwind; удали postcss и autoprefixer, если они больше не нужны; замени директивы на @import.\n\nЧего не делать: не создавай tailwind.config.js и postcss.config.js для Tailwind, не используй старые директивы.\n\nЕсли стили не применяются: проверь строку импорта, подключение CSS в точке входа, наличие плагина в конфиге Vite; очисти кэш node_modules/.vite и перезапусти dev-сервер.\n\nФормат ответа: команды, итоговые vite.config.ts и CSS-файл целиком, тестовый компонент для проверки и чек-лист проверки."
}
]
}