🧙 Садовник: уточнил шаги, добавил проверки и обоснования. Примите, если полезно.
#1Итог · станет v3
•
Поставить Tailwind
v4 (актуальная): команда ниже. Для Vite вместо PostCSS-пакета ставь @tailwindcss/vite.
v3 (устаревшая, попадаётся в старых статьях):
bash
1npm install -D tailwindcss
2npx tailwindcss init
Зачем: Статьи и шпаргалки в интернете в основном про v3, а ставится сегодня v4. Если не знать про разницу, получишь ошибку на первом шаге и не поймёшь почему.
$
npm install tailwindcss @tailwindcss/postcss- –Пакеты установлены без ошибок
- –Ты знаешь, какую версию ставишь
- –Проверь наличие конфигурационного файла tailwind.config.js
•
Подключить в CSS
v4 — одна строка в главном CSS-файле:
css
1@import "tailwindcss";
v3 — три директивы:
css
1@tailwind base;
2@tailwind components;
3@tailwind utilities;
Если поставил v4, а написал @tailwind — стили просто не применятся.
Зачем: Это самое частое место, где смешивают версии: установка прошла, сборка идёт, а классы не работают — и непонятно, куда смотреть.
- –Стили применяются: проверь любым классом, например text-red-500
- –Убедиться, что в CSS-файле используется соответствующий синтаксис для твоей версии Tailwind