Цвета и прозрачность

В Tailwind есть готовая палитра: два десятка цветов, у каждого 11 оттенков. Цвет указывают в имени класса вместе со свойством, к которому он относится, — текст, фон или рамка.

Цвет и оттенок

Имя цвета состоит из названия и номера оттенка: blue-500, gray-100, rose-700. Чем больше номер, тем темнее цвет:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="flex">
  <div class="size-12 bg-indigo-50"></div>
  <div class="size-12 bg-indigo-200"></div>
  <div class="size-12 bg-indigo-400"></div>
  <div class="size-12 bg-indigo-600"></div>
  <div class="size-12 bg-indigo-800"></div>
  <div class="size-12 bg-indigo-950"></div>
</div>

Под кодом — ряд квадратов от почти белого до тёмно-синего. Оттенки: 50, 100, 200 и далее через сотню до 900, плюс 950.

Основные цвета палитры: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose и серые slate, gray, zinc, neutral, stone. Ещё есть black, white и transparent без номеров.

Куда применяется цвет

Префикс перед цветом говорит, что красить:

Оформим плашку «Хит продаж» для карточки товара:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<span class="rounded border border-amber-300 bg-amber-100 px-2 py-1 text-sm text-amber-800">
  Хит продаж
</span>

Светлый фон, рамка чуть темнее и тёмный текст одного цвета — частый приём для меток и уведомлений.

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

Через косую черту после цвета указывают непрозрачность в процентах: bg-black/50 — чёрный фон, наполовину прозрачный. Это удобно для затемнения поверх картинки:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="relative w-80">
  <img src="/media/photo-400x250.jpg" alt="Наушники">
  <p class="absolute bottom-0 w-full bg-black/60 p-3 text-white">Новинка недели</p>
</div>

Сквозь тёмную полосу видна картинка, а белый текст на ней хорошо читается. Модификатор работает с любым цветом: text-indigo-600/75, border-white/20.

Частая ошибка

Собирать имя цвета из частей в JavaScript:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<p id="price">$79</p>
<script>
  const color = 'green';
  document.getElementById('price').className = `text-${color}-600`;
</script>

В браузерном скрипте это сработает, а в проекте с Vite или CLI — нет: при сборке Tailwind ищет в файлах готовые имена классов и не видит text-green-600. Пишите имена целиком, например выбирайте из объекта { ok: 'text-green-600', error: 'text-red-600' }.