Урок 03. Старый vs Новый: конфиг против @theme

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

⚡ Кратко

Раньше тема жила в JavaScript-объекте и была доступна только сборщику. Теперь тема — это CSS-переменные: их видит и сборщик, и браузер, и ваш собственный CSS.

Конфигурация темы

❌ v3: объект в JavaScript

📄 tailwind.config.js

module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: { brand: { 500: "#4f46e5" } },
      spacing: { huge: "7.5rem" },
      screens: { tablet: "960px" },
    },
  },
}

Значение #4f46e5 существовало только на этапе сборки: чтобы использовать его в своём CSS, приходилось дублировать константу.

✅ v4: переменные в CSS

/* src/style.css */
@import "tailwindcss";

@theme {
  --color-brand-500: oklch(0.55 0.21 264);
  --spacing-huge: 7.5rem;
  --breakpoint-tablet: 60rem;
}

Те же токены доступны в рантайме: var(--color-brand-500) работает в любом вашем правиле, в inline-стиле и даже в JavaScript через getComputedStyle.

Список сканируемых файлов

❌ v3: обязательное поле content

content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],

Забытый путь означал, что часть классов молча не попадала в сборку — классическая ошибка при добавлении нового каталога.

✅ v4: автоопределение плюс уточнения

@import "tailwindcss";
@source "../backend/templates";

По умолчанию сканируется проект целиком (без игнорируемых каталогов), а @source нужен только для нестандартных мест.

Сводка

Задача	v3	v4
Добавить цвет	`theme.extend.colors`	`--color-*` в `@theme`
Добавить брейкпоинт	`theme.screens`	`--breakpoint-*`
Свой размер	`theme.spacing`	`--spacing-*`
Своя утилита	плагин на JS	`@utility`
Свой вариант	плагин на JS	`@custom-variant`
Файлы для сканирования	`content`	автоматически + `@source`

Старый конфиг можно временно подключить директивой @config "./tailwind.config.js"; — это спасательный круг на время миграции, а не постоянное решение.