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

📁 Раздел: Введение ⏱️ Время изучения: ~45 мин 🎯 Сложность: Начальная

⚡ Кратко

В v3 установка состояла из инициализации конфигурации, настройки PostCSS и трёх директив в CSS. В v4 остались один пакет-интеграция и одна строка @import "tailwindcss".

Установка: v3 → v4

❌ Tailwind v3

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

📄 tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [],
}

📄 src/input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

✅ Tailwind v4

npm install tailwindcss @tailwindcss/vite

📄 vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

📄 src/style.css

@import "tailwindcss";

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

Что	v3	v4
Инициализация	`npx tailwindcss init -p`	не нужна
Файл конфигурации	`tailwind.config.js`	`@theme` в CSS
Список файлов	поле `content`	автоопределение, при нужде `@source`
Директивы в CSS	три `@tailwind`	один `@import`
Автопрефиксы	пакет `autoprefixer`	встроены в движок
Интеграция с Vite	через PostCSS	плагин `@tailwindcss/vite`
PostCSS-плагин	`tailwindcss`	`@tailwindcss/postcss`

Не смешивайте инструкции: если в проекте есть tailwind.config.js и при этом стоит v4, конфигурация просто игнорируется — и «настройки не применяются» без единой ошибки в консоли. Подключить старый конфиг можно директивой @config, но лучше перенести тему в @theme (см. справочник по миграции).