Обрезка фона

​

Основы использования

​

Установка фонового клипа

Используйте утилиты bg-clip-{keyword} для управления ограничивающей рамкой фона элемента.

<div class="bg-clip-border p-6 bg-violet-600 border-4 border-violet-300 border-dashed"></div>
<div class="bg-clip-padding p-6 bg-violet-600 border-4 border-violet-300 border-dashed"></div>
<div class="bg-clip-content p-6 bg-violet-600 border-4 border-violet-300 border-dashed"></div>

​

Обрезка текста

Используйте bg-clip-text, чтобы обрезать фон элемента, чтобы он соответствовал форме текста. Полезно для эффектов, когда вы хотите, чтобы фоновое изображение было видно сквозь текст.

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

​

Применяя условно

​

Наведение, фокус и другие состояния

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:bg-clip-padding to only apply the bg-clip-padding utility on hover.

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

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

​

Контрольные точки и медиа-запросы

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:bg-clip-padding to apply the bg-clip-padding utility at only medium screen sizes and above.

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

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.