Урок 02. Частые ошибки установки

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

⚡ Кратко

«Классы прописаны, а стилей нет» — пять причин по убыванию частоты: не подключён CSS, не добавлен плагин, старый PostCSS-пакет, файл вне области сканирования, не перезапущен dev-сервер.

Ошибка 1. CSS-файл не подключён к странице

Как ломается: страница выглядит как голый HTML, в DevTools во вкладке Network нет запроса за CSS.

❌ Файл собран, но никто его не импортирует

// src/main.tsx
import App from './App'
// import './index.css'   ← закомментировано или забыто

✅ Импорт на месте

// src/main.tsx
import './index.css'
import App from './App'

Почему: Tailwind генерирует CSS для файла, но подключить его к странице — задача сборщика или вашего <link>.

Ошибка 2. Плагин установлен, но не включён

Как ломается: ошибок нет, стилей нет, @import "tailwindcss" уходит в браузер как есть.

// vite.config.ts — плагин импортирован, но не добавлен в plugins
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [],   // ← пусто
})

Почему: импорт сам по себе ничего не включает. Проверьте, что tailwindcss() вызван и стоит в массиве plugins.

Ошибка 3. Старая запись PostCSS-плагина

Как ломается: сборка падает с сообщением, что tailwindcss нельзя использовать напрямую как плагин PostCSS и нужно поставить @tailwindcss/postcss.

❌ v3-запись

export default { plugins: { tailwindcss: {}, autoprefixer: {} } }

✅ v4-запись

export default { plugins: { "@tailwindcss/postcss": {} } }

Ошибка 4. Файл вне области сканирования

Как ломается: часть страниц оформлена, а классы из одного каталога (например, подключённого пакета или папки из .gitignore) не работают.

/* src/style.css */
@import "tailwindcss";
@source "../node_modules/@my-company/ui-kit/dist";

Почему: по умолчанию сканируется дерево проекта без игнорируемых каталогов. Внешние источники добавляются явно — подробности в уроке 03.

Ошибка 5. Dev-сервер не перезапущен после правки конфигурации

Изменения в vite.config.ts и в установленных пакетах подхватываются только при перезапуске процесса. Правило простое: правили конфигурацию — остановите (Ctrl+C) и запустите заново.

Порядок диагностики: открыть DevTools → Network → найти CSS-файл → посмотреть, есть ли в нём хоть одно правило вида .flex. Если файла нет — ошибка 1; если файл есть, но пустой — ошибки 2–4.