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

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

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

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

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

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

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

Если нужна кнопка-переключатель, в конфиге задают режим по классу — тогда тёмная тема включается добавлением класса dark на корневой элемент:

// tailwind.config.js
module.exports = {
  darkMode: "class"
}

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

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

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

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

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

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

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

Итог

dark: задаёт стили для тёмной темы; база — для светлой.
Режим тёмной темы — по системе или по классу dark (настройка darkMode).
Квадратные скобки [...] позволяют задать точное значение вне шкалы — это аварийный люк, не основной инструмент.