Урок 17. Старый vs Новый: установка под v3 и v4

📁 Раздел: shadcn/ui ⏱️ Время изучения: ~50 мин 🎯 Сложность: Средняя

⚡ Кратко

Инструкции трёхлетней давности предполагают Tailwind v3, конфиг tailwind.config.js и Radix. Актуальная установка короче: плагин Vite, токены в CSS, Base UI.

Установка тогда и сейчас

❌ Инструкция под Tailwind v3

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npx shadcn-ui@latest init      # старое имя пакета

// tailwind.config.js — CLI дописывал сюда тему
module.exports = {
  darkMode: ["class"],
  content: ["./src/**/*.{ts,tsx}"],
  theme: { extend: { colors: { border: "hsl(var(--border))", … } } },
  plugins: [require("tailwindcss-animate")],
}

✅ Актуальная установка

npm install tailwindcss @tailwindcss/vite
npx shadcn@latest init         # пакет называется shadcn

📄 src/index.css

@import "tailwindcss";
@import "tw-animate-css";

@theme inline {
  --color-border: var(--border);
}

Таблица различий

Что	Раньше	Сейчас
Пакет CLI	`shadcn-ui`	`shadcn`
Тема	`tailwind.config.js`	`@theme inline` в CSS
Формат цветов	`hsl(var(--border))`	`oklch(…)` напрямую
Анимации	`tailwindcss-animate`	`tw-animate-css`
Тёмная тема	`darkMode: ["class"]`	`@custom-variant dark (…)`
Примитивы	Radix	Base UI (Radix доступен флагом)
Стиль	`default` / `new-york`	`base-nova`

Практический вывод: не смешивайте инструкции. Если статья предлагает создать tailwind.config.js и вписать туда content — она про v3, и в вашем проекте этот файл просто не будет прочитан.

Миграция существующего проекта

npx shadcn@latest migrate

У CLI есть режим миграции — он помогает перевести проект на новые соглашения. Перед запуском убедитесь, что рабочее дерево чистое: миграция меняет файлы, и вам понадобится diff.