Настройка темы через @theme

Тема — набор значений, из которых Tailwind строит утилиты: цвета, шрифты, контрольные точки, тени. В Tailwind 4 тему настраивают прямо в CSS директивой @theme: каждая переменная внутри неё создаёт новые классы.

Где писать

В проекте на Vite тема описывается в главном CSS-файле src/style.css, сразу после подключения Tailwind:

@import "tailwindcss";
 
@theme {
  --color-brand-500: #e11d48;
  --color-brand-600: #be123c;
}

Теперь у вас есть bg-brand-500, text-brand-600, border-brand-500 и все остальные утилиты, которые принимают цвет, — включая модификатор прозрачности bg-brand-500/20.

Пространства имён

Начало имени переменной определяет, какие классы появятся:

Цвета, шрифт и контрольная точка

В браузерном скрипте то же самое пишут в <style type="text/tailwindcss">. Добавим фирменный цвет, шрифт для заголовков и ещё одну контрольную точку:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
  @theme {
    --color-brand-500: #e11d48;
    --color-brand-600: #be123c;
    --font-display: Georgia, "Times New Roman", serif;
    --breakpoint-xs: 30rem;
  }
</style>
 
<div class="max-w-xs rounded-xl bg-white p-4 shadow">
  <h2 class="font-display text-2xl">Наушники</h2>
  <p class="text-gray-600 xs:text-brand-600">$79</p>
  <button class="mt-3 rounded-lg bg-brand-500 px-4 py-2 text-white hover:bg-brand-600">В корзину</button>
</div>

Заголовок набран шрифтом с засечками, кнопка стала малиновой, а цена окрашивается в фирменный цвет на экранах от 480 пикселей. Подключённый веб-шрифт, например из Google Fonts, указывают в --font-display так же — по имени семейства.

Переменные доступны в CSS

Переменные темы доступны как обычные CSS-переменные — их можно использовать в своём CSS: color: var(--color-brand-500). Так ваш CSS и утилиты берут цвет из одного места.

Замена стандартных значений

Чтобы убрать все стандартные цвета и оставить только свои, пространство имён сбрасывают значением initial:

@import "tailwindcss";
 
@theme {
  --color-*: initial;
  --color-white: #fff;
  --color-ink: #111827;
  --color-brand: #e11d48;
}

Классы вроде bg-blue-500 после этого не работают — остаются только white, ink и brand.

Частая ошибка

Объявлять переменные темы в :root вместо @theme:

:root {
  --color-brand: #e11d48;
}

Переменная появится, но класс bg-brand — нет: Tailwind создаёт утилиты только из @theme. Обычный :root подходит для переменных, которым классы не нужны. В Tailwind 3 тему настраивали в tailwind.config.js — в четвёртой версии этот файл не нужен.