Фоны и градиенты
Фон в Tailwind — это не только цвет. Классы bg- задают фоновую картинку, её размер и положение, а также градиенты, для которых в обычном CSS пришлось бы писать длинную функцию linear-gradient.
Цвет фона
С цветом фона вы уже знакомы: bg-white, bg-gray-50, bg-indigo-600/90. Светло-серый фон страницы и белые карточки на нём — самая частая пара:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="bg-gray-100 p-6">
<div class="rounded-lg bg-white p-4">Карточка на сером фоне</div>
</div>Градиент
Линейный градиент включают классом bg-linear-to- с направлением, а цвета задают from- (начало), via- (середина) и to- (конец):
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="h-24 rounded-xl bg-linear-to-r from-indigo-500 to-pink-500"></div>Полоса плавно переходит из синего в розовый слева направо. Направления: to-r, to-l, to-t, to-b и диагонали to-tr, to-br, to-bl, to-tl. Угол можно задать числом: bg-linear-45.
Средний цвет и радиальный градиент:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="h-20 rounded-xl bg-linear-to-r from-amber-400 via-rose-500 to-violet-600"></div>
<div class="mt-3 h-32 rounded-xl bg-radial from-sky-300 to-indigo-800"></div>Первая полоса проходит три цвета, во втором блоке светлое пятно в центре темнеет к краям. В Tailwind 3 линейный градиент назывался bg-gradient-to-r — в старых примерах встречается именно он.
Градиентный текст
Градиент можно «вырезать» буквами: bg-clip-text обрезает фон по тексту, а text-transparent делает сами буквы прозрачными:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<h2 class="bg-linear-to-r from-indigo-600 to-pink-500 bg-clip-text text-4xl font-extrabold text-transparent">
Распродажа
</h2>Фоновое изображение
Картинку указывают в квадратных скобках — это произвольное значение, которому посвящён отдельный урок. bg-cover растягивает изображение на весь блок, bg-center ставит его по центру:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="flex h-48 items-end rounded-xl bg-[url(/media/photo-800x500.jpg)] bg-cover bg-center p-4">
<p class="rounded bg-white/80 px-3 py-1 font-semibold">Новая коллекция</p>
</div>Изображение заполнило блок, а полупрозрачная плашка с текстом стоит в нижнем углу.
Частая ошибка
Задать цвета градиента, но забыть класс направления:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="h-16 rounded-xl from-indigo-500 to-pink-500"></div>Блок пустой: from- и to- только хранят цвета, а градиент рисует bg-linear-to-r, bg-radial или bg-conic. Нужны оба вида классов.