В прошлой статье мы разобрали базовые утилиты. Теперь углубимся в работу с цветами и шрифтами. В Tailwind CSS v4 эти возможности стали ещё удобнее: библиотека поддерживает современную цветовую модель OKLCH, P3-палитры, а также предоставляет новый способ расширять тему с помощью @theme.

Встроенные цвета

Tailwind имеет готовую систему цветов, покрывающую основные сценарии:

• bg-blue-500 — синий фон,
• text-red-600 — красный текст,
• border-gray-300 — серая рамка.

Чем меньше число (100, 200), тем цвет светлее. Чем больше (700, 800, 900) — тем темнее. Такая шкала позволяет гибко работать с оттенками.

Пример:

<div class="p-4 bg-green-100 text-green-800 rounded">
  Информационное сообщение
</div>

Нюансы при работе с палитрой

• У Tailwind есть «semantic colors» вроде bg-success или bg-error, если вы определите их в @theme. Это упрощает поддержку больших проектов.
• Встроенная палитра сбалансирована по яркости: 500 часто используется как основной оттенок, 600 — для hover-состояний.
• Tailwind поддерживает не только фон и текст, но и границы, выделения, плейсхолдеры: placeholder-gray-400, ring-blue-300 и т. д.

Цветовые модели в v4

Tailwind v4 перешёл на современную модель OKLCH. Это даёт:

• Предсказуемую яркость: цвета не выглядят «грязными» при изменении насыщенности.
• Более гармоничное отображение на разных экранах.
• Возможность использовать «системное» восприятие цвета для улучшенной доступности.

Кроме того, появилась поддержка P3-палитры, которая позволяет использовать расширенный цветовой диапазон для дисплеев с широкой цветовой гаммой. Это особенно важно для дизайнеров и проектов с акцентом на визуальную составляющую.

Подключение своих цветов

Раньше нужно было редактировать tailwind.config.js. В v4 стало проще: токены можно определять прямо в CSS через директиву @theme.

Пример — создадим свой брендовый цвет brand:

@theme {
  --color-brand: #4f46e5; /* фиолетовый */
}

Теперь в HTML можно использовать:

<button class="bg-brand text-white px-4 py-2 rounded">
  Кнопка в фирменном стиле
</button>

Дополнительные нюансы

• Можно задавать сразу несколько брендовых цветов: --color-brand-light, --color-brand-dark.
• Tailwind понимает не только HEX, но и oklch(), rgb(), hsl().
• Токены наследуются: если вы определили --color-brand, то можно использовать его и для border-brand, и для text-brand.

Работа со шрифтами

В Tailwind есть базовые утилиты для семейств шрифтов:

• font-sans — системные без засечек,
• font-serif — с засечками,
• font-mono — моноширинные.

Чтобы подключить кастомный шрифт (например, из Google Fonts), нужно:

Вставить ссылку в index.html:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">

Добавить его в @theme:

@theme {
  --font-inter: "Inter", sans-serif;
}

Использовать в HTML:

<h1 class="font-inter text-2xl">
  Заголовок с кастомным шрифтом
</h1>

Важные детали

• Вы можете указать несколько fallback-шрифтов: "Inter", "Helvetica", sans-serif.
• Для разных частей интерфейса можно задавать разные семейства: например, моноширинный для кода, брендовый для заголовков.
• Tailwind также поддерживает утилиты для начертания (italic), интервалов (leading-loose) и трекинга (tracking-tight).

Мини-проект: hero-секция

Попробуем объединить цвета и шрифты в простой секции:

<section class="bg-brand text-white py-16 text-center">
  <h1 class="font-inter text-4xl font-bold mb-4">
    Добро пожаловать в проект
  </h1>
  <p class="text-lg mb-6">
    Создаём интерфейсы быстрее с помощью Tailwind CSS
  </p>
  <button class="bg-white text-brand px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
    Начать
  </button>
</section>

• bg-brand — наш фирменный цвет,
• font-inter — кастомный шрифт,
• кнопка сделана контрастной для лучшей читаемости,
• transition добавляет плавность при наведении.

Упражнение

1. Подключи свой шрифт из Google Fonts (например, Roboto или Nunito).
2. Создай кнопку с кастомным цветом brand.
3. Сделай заголовок hero-секции с этим шрифтом и цветом.
4. Попробуй использовать P3-цвет или oklch() для эксперимента.

👉 В следующей статье соберём небольшой лендинг: шапку, блок с заголовком и кнопку, а также простой футер.