background-clip

Примеры

Базовый пример

Используйте утилиты bg-clip-border, bg-clip-padding и bg-clip-content для управления ограничивающей рамкой фона элемента:

<div class="border-4 bg-indigo-500 bg-clip-border p-3"></div><div class="border-4 bg-indigo-500 bg-clip-padding p-3"></div><div class="border-4 bg-indigo-500 bg-clip-content p-3"></div>

Обрезка по тексту

Используйте утилиту bg-clip-text для обрезки фона элемента по форме текста:

<p class="bg-linear-to-r from-pink-500 to-violet-500 bg-clip-text text-5xl font-extrabold text-transparent ...">  Привет мир</p>

Адаптивный дизайн

Префикс a background-clip утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<div class="bg-clip-border md:bg-clip-padding ...">  <!-- ... --></div>

Подробнее об использовании вариантов читайте в документации по вариантам.