Фоны
Утилиты для управления рамкой фона элемента.
Используйте утилиты bg-clip-{keyword}
для управления ограничивающей рамкой фона элемента.
bg-clip-border
bg-clip-padding
bg-clip-content
<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.