Тёмная тема

Вариант dark: включает утилиту, когда активна тёмная тема: bg-white dark:bg-gray-900 — белый фон днём и тёмный ночью. Остаётся решить, кто включает тёмную тему — операционная система или кнопка на сайте.

По настройкам системы

По умолчанию dark: следует системной настройке пользователя — медиазапросу prefers-color-scheme: dark. Ничего настраивать не нужно:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="rounded-xl bg-white p-4 text-gray-900 dark:bg-gray-900 dark:text-white">
  Тема как в системе
</div>

Если в вашей системе включена тёмная тема, блок тёмный, иначе — светлый. Каждому цвету пишут пару: светлый вариант без префикса и тёмный с dark:.

Переключатель на сайте

Чтобы пользователь мог выбрать тему кнопкой, dark: переопределяют директивой @custom-variant — теперь он срабатывает, когда у корневого элемента есть класс dark. В проекте эта строка пишется в главном CSS-файле, например src/style.css, после @import "tailwindcss";:

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

В примере ниже то же самое записано для браузерного скрипта, а кнопка добавляет и убирает класс dark у тега <html>:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
  @custom-variant dark (&:where(.dark, .dark *));
</style>
 
<div class="max-w-xs rounded-xl bg-white p-4 shadow dark:bg-gray-800">
  <h2 class="font-semibold text-gray-900 dark:text-white">Беспроводные наушники</h2>
  <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Шумоподавление и 30 часов работы.</p>
  <button id="theme" class="mt-3 rounded-lg bg-gray-900 px-3 py-1 text-sm text-white dark:bg-white dark:text-gray-900">
    Сменить тему
  </button>
</div>
 
<script>
  document.getElementById('theme').addEventListener('click', () => {
    document.documentElement.classList.toggle('dark');
  });
</script>

Нажмите кнопку — карточка станет тёмной, нажмите ещё раз — светлой. Выбор обычно сохраняют в localStorage и восстанавливают при загрузке.

Через data-атрибут

Вместо класса можно использовать атрибут — удобно, если тем больше двух:

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

Тогда тёмную тему включает <html data-theme="dark">.

Какой способ выбрать

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

Добавить @custom-variant и ждать, что сайт по-прежнему следует теме системы. После переопределения dark: реагирует только на класс: если скрипт не поставил dark на <html>, страница всегда светлая. Скрипт при загрузке должен сам выбрать тему — из localStorage, а если там пусто, из matchMedia('(prefers-color-scheme: dark)').