Кастомизация темы в tailwind.config

Подстраиваем Tailwind под бренд: свои цвета, шрифты и точки перелома.

Tailwind v4 (актуальная версия). В v3 тему настраивали в JS-файле tailwind.config.js (раздел theme.extend). В v4 кастомизация переехала в CSS — её задают директивой @theme через CSS-переменные. JS-конфиг всё ещё поддерживается для обратной совместимости, но подключать его нужно явно директивой @config.

Блок @theme во входном CSS — это и есть дизайн-система проекта: палитра, шкалы, шрифты и брейкпоинты.

Дополняем тему

В v4 ваши токены просто перечисляют внутри блока @theme — они дополняют стандартную тему, а все встроенные классы Tailwind остаются на месте. Отдельной опции extend, как в v3, больше нет: добавление переменной = «дополнить». Если же нужно полностью убрать стандартную группу токенов (например, все встроенные цвета), её обнуляют через --color-*: initial; и задают свою палитру — это нужно редко.

Свои цвета

Добавим фирменный цвет бренда — он станет доступен как обычная утилита bg-brand, text-brand и т.д.:

@import "tailwindcss";

@theme {
  --color-brand: #2563eb;
  --color-brand-light: #60a5fa;
  --color-brand-dark: #1e40af;
}

Теперь bg-brand даёт основной фирменный синий, bg-brand-light — светлый вариант, bg-brand-dark — тёмный. Базовая переменная без суффикса (--color-brand) — это и есть значение «по умолчанию»; в v3 ту же роль играл ключ DEFAULT в JS-конфиге.

<button class="bg-brand hover:bg-brand-dark text-white px-4 py-2 rounded">
  Фирменная кнопка
</button>

Кнопка покрасится в ваш бренд-цвет, а при наведении потемнеет до brand-dark.

Свои шрифты

Шрифтовые семейства задаются переменными --font-* и становятся классами font-*:

@theme {
  --font-display: "Manrope", sans-serif;
}

Класс font-display применит шрифт Manrope (с запасным sans-serif). Сам шрифт нужно подключить отдельно — например, через @font-face или ссылку на Google Fonts.

Свои брейкпоинты

Если стандартных sm/md/lg мало, добавьте свой переменной --breakpoint-*:

@theme {
  --breakpoint-3xl: 120rem;
}

Появится префикс 3xl: — он сработает на очень широких мониторах от 120rem (1920px). Например, 3xl:grid-cols-5 покажет пять колонок только на больших экранах.

Зачем это делать

Вынося бренд-цвета и шрифты в блок @theme, вы получаете единый источник правды: поменяли значение в одном месте — обновился весь сайт. Более того, каждый токен @theme превращается в настоящую CSS-переменную (var(--color-brand)), доступную и в обычном CSS. Это та же идея, что и токены дизайн-системы, только встроенная в Tailwind.

Итог

Кастомизация в v4 живёт в CSS-блоке @theme и дополняет стандартную тему, не ломая встроенные классы (JS-конфиг тоже работает — через @config).
Переменные --color-*, --font-*, --breakpoint-* сразу становятся обычными утилитами (bg-brand, font-display, 3xl:).
Переменная без суффикса (--color-brand) задаёт значение цвета по умолчанию; шрифты надо ещё подключить отдельно.