Цвета и палитра

Разбираемся в цветовой палитре Tailwind и в том, как красить текст, фон и рамки.

Цвет задаётся как свойство-цвет-оттенок: bg-blue-600 — это «фон, синий, оттенок 600».

Три места, где нужен цвет

• text-* — цвет текста;
• bg-* — цвет фона;
• border-* — цвет рамки.

<p class="text-white bg-blue-600">Белый текст на синем фоне</p>

Абзац получит синюю заливку и белый текст внутри.

Шкала оттенков

У каждого цвета есть градации яркости от 50 (почти белый) до 950 (почти чёрный): 50, 100, 200, ..., 900, 950. Чем больше число — тем темнее.

Палитра богатая: slate, gray, red, orange, amber, green, blue, indigo, purple, pink и другие. Есть и абсолютные white, black, transparent.

Практический приём: светлый фон + тёмный текст

Хороший контраст легко собрать, взяв один цвет в светлом и тёмном оттенке — например, плашка-бейдж:

<span class="bg-green-100 text-green-800 px-2 py-1 rounded">
  Активен
</span>

Получится аккуратный зелёный бейдж: бледно-зелёный фон (green-100) и насыщенно-зелёный текст (green-800) — читаемо и спокойно. Этот приём «светлый фон + тёмный текст того же цвета» используют для всех статусных меток.

Рамки

Цвет рамки сам по себе её не показывает — рамке нужна толщина. Класс border добавляет рамку 1px, а border-* задаёт ей цвет:

<div class="border border-gray-300">Блок с серой рамкой</div>

Блок обведётся тонкой светло-серой линией.

Прозрачность цвета

К любому цвету можно добавить прозрачность через слеш: bg-black/50 — чёрный фон с непрозрачностью 50%. Удобно для затемняющих подложек под модалками.

<div class="bg-black/50">Полупрозрачная подложка</div>

Итог

• text-*, bg-*, border-* красят текст, фон и рамку.
• Оттенки идут шкалой 50…950: больше число — темнее цвет.
• Связка «светлый фон + тёмный текст того же цвета» даёт читаемые статусные бейджи; цвет/NN добавляет прозрачность.