Прозрачные цвета

В курсе CSS вы делали цвета прозрачными с помощью альфа-канала, например rgba(71, 105, 88, 0.2) или rgb(255 0 0 / 50%). В Tailwind после цвета пишут косую черту и число: его непрозрачность в процентах от 0 (полностью прозрачный) до 100 (непрозрачный). Tailwind называет это модификатором прозрачности (opacity modifier):

(Настоящий CSS Tailwind получает такой результат иначе, но цвет тот же.) Чаще всего используют числа, кратные 5 или 10, но подойдёт любое число от 0 до 100. Есть и ещё один цвет — transparent: bg-transparent делает фон полностью прозрачным.

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

выделенное слово выделенное слово выделенное слово

Мы используем её как маркер для выделения текста: слова «готов обрести новый дом» в абзаце про новый дом лежат в элементе strong, и мы дадим им светло-оранжевый фон, сквозь который просвечивает страница.

Косая черта делает прозрачным только один этот цвет. Чтобы сделать полупрозрачным весь элемент со всем его содержимым, в CSS есть свойство opacity, знакомое вам по курсу CSS; его классы вы встретите в уроке о рамках, тенях и изображениях.