5. Цветовая система

Tailwind CSS: Цветовая система

Tailwind поставляется с продуманной палитрой из ~22 цветов, каждый в 11 оттенках (от 50 до 950). Это готовая дизайн-система — больше не нужно гадать какой оттенок синего выбрать.

Основные цвета палитры

slate, gray, zinc, neutral, stone  — нейтральные
red, orange, amber, yellow          — тёплые
lime, green, emerald, teal          — зелёные
cyan, sky, blue, indigo             — синие
violet, purple, fuchsia, pink, rose — фиолетовые/розовые

Шкала оттенков (50-950)

Для каждого цвета:

• 50 — очень светлый (почти белый)
• 100–200 — светлый (подходит для фонов)
• 300–400 — средне-светлый
• 500 — насыщенный (основной)
• 600–700 — тёмный
• 800–900 — очень тёмный
• 950 — почти чёрный

<div class="bg-blue-50">Очень светло-синий фон</div>
<div class="bg-blue-100">Светло-синий фон</div>
<div class="bg-blue-500">Синий</div>
<div class="bg-blue-700">Тёмно-синий</div>
<div class="bg-blue-900">Почти чёрный синий</div>

Применение цветов

Текст:

<p class="text-gray-600">Серый текст (основной контент)</p>
<p class="text-gray-400">Светло-серый (подсказки)</p>
<p class="text-blue-600">Синий (ссылки)</p>
<p class="text-red-500">Красный (ошибки)</p>
<p class="text-emerald-600">Зелёный (успех)</p>
<p class="text-amber-500">Жёлтый (предупреждения)</p>

Фоны:

<div class="bg-white">Белый</div>
<div class="bg-gray-50">Почти белый (страница)</div>
<div class="bg-gray-100">Светлый (карточка)</div>
<div class="bg-blue-500">Синяя кнопка</div>
<div class="bg-emerald-100">Светло-зелёный (успех)</div>

Границы:

<div class="border border-gray-200">Тонкая граница</div>
<div class="border-2 border-blue-500">Толстая синяя</div>
<div class="border border-red-300">Красная (ошибка)</div>

Ring (focus-кольца):

<input class="focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">

Градиенты

<!-- Линейный градиент -->
<div class="bg-gradient-to-r from-blue-500 to-purple-600">
  Синий → Фиолетовый (слева направо)
</div>

<!-- С промежуточным цветом -->
<div class="bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500">
  Розовый → Фиолетовый → Синий
</div>

<!-- Направления: to-r, to-l, to-t, to-b, to-tr, to-tl, to-br, to-bl -->
<div class="bg-gradient-to-br from-emerald-400 to-teal-600">
  Диагональный
</div>

Прозрачность

<!-- opacity: 50% -->
<div class="opacity-50">Полупрозрачный блок</div>

<!-- Прозрачность цвета (не влияет на дочерние элементы) -->
<div class="bg-blue-500/20">Синий с 20% прозрачностью</div>
<div class="text-red-500/75">Красный текст 75% непрозрачности</div>
<div class="border border-gray-900/10">Граница с 10% черного</div>

Кастомные цвета

В tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        // Простой цвет
        brand: '#6d28d9',

        // Цвет с оттенками
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          900: '#1e3a8a',
        },
      },
    },
  },
}

Использование:

<div class="bg-brand">Брендовый цвет</div>
<div class="bg-primary-100 text-primary-700">Светлый с тёмным текстом</div>

Практика