Тёмная тема и произвольные значения

Два мощных инструмента: автоматическая тёмная тема и точечные значения вне стандартной шкалы.

Тёмная тема через dark:

Вариант dark: включает стиль, когда активна тёмная тема. Пишем два набора классов — для светлой (база) и тёмной (dark:):

<div class="bg-white text-gray-900 dark:bg-gray-800 dark:text-gray-100">
  Контент
</div>

В светлой теме — белый фон и почти чёрный текст; в тёмной — тёмно-серый фон и светлый текст. Один и тот же блок аккуратно выглядит в обоих режимах. По умолчанию dark: срабатывает по системной настройке пользователя (предпочтение ОС «тёмная тема»).

Переключение вручную

Tailwind v4 (актуальная версия). Если нужна кнопка-переключатель, в v3 для этого задавали darkMode: "class" в tailwind.config.js. В v4 настройка переехала в CSS: тёмную тему «по классу» включают директивой @custom-variant прямо во входном файле:

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

После этого тёмную тему включает/выключает класс dark на <html> (его обычно ставит маленький скрипт по клику на переключатель) — ровно как раньше, но без JS-конфига.

Произвольные значения [...]

Шкала Tailwind покрывает почти всё, но иногда нужно ровно конкретное значение, которого в ней нет. Тогда впишите его в квадратных скобках:

<div class="top-[117px] w-[342px] bg-[#1da1f2]">
  Точные значения
</div>

Здесь отступ сверху ровно 117px, ширина 342px, а фон — фирменный голубой по точному hex-коду. Tailwind сгенерирует для них CSS как для обычных утилит.

Когда уместны arbitrary values

Это «аварийный люк» для редких случаев: подогнать элемент под фон-картинку, попасть в точный цвет бренда, выставить пиксельный отступ из макета. Но если одно и то же произвольное значение встречается часто — лучше добавить его в тему конфига (об этом в следующем разделе), чтобы не плодить «магические числа» по всей разметке.

Итог

dark: задаёт стили для тёмной темы; база — для светлой.
Режим тёмной темы — по системе или по классу dark; в v4 режим «по классу» задают директивой @custom-variant dark в CSS.
Квадратные скобки [...] позволяют задать точное значение вне шкалы — это аварийный люк, не основной инструмент.