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

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

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

extend против замены

Главное правило: чаще всего вы хотите дополнить стандартную тему, а не заменить её. Для этого ваши значения кладут в theme.extend — тогда все встроенные классы Tailwind остаются, а к ним добавляются ваши. Значения прямо в theme (без extend) полностью заменяют стандартные — это нужно редко.

Свои цвета

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

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,vue}"],
  theme: {
    extend: {
      colors: {
        brand: {
          light: "#60a5fa",
          DEFAULT: "#2563eb",
          dark: "#1e40af"
        }
      }
    }
  }
}

Теперь bg-brand даёт основной фирменный синий, bg-brand-light — светлый вариант, bg-brand-dark — тёмный. Ключ DEFAULT — это значение «без суффикса».

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

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

Свои шрифты

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

theme: {
  extend: {
    fontFamily: {
      display: ["Manrope", "sans-serif"]
    }
  }
}

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

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

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

theme: {
  extend: {
    screens: {
      "3xl": "1920px"
    }
  }
}

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

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

Вынося бренд-цвета и шрифты в конфиг, вы получаете единый источник правды: поменяли значение в одном месте — обновился весь сайт. Это та же идея, что и токены дизайн-системы, только встроенная в Tailwind.

Итог

Кастомизация живёт в theme.extend — это дополняет стандартную тему, не ломая встроенные классы.
Свои значения colors, fontFamily, screens сразу становятся обычными утилитами (bg-brand, font-display, 3xl:).
Ключ DEFAULT задаёт значение цвета без суффикса; шрифты надо ещё подключить отдельно.