Эффекты
Утилиты для управления тенью блока элемента.
Используйте утилиты shadow-sm
, shadow
, shadow-md
, shadow-lg
, shadow-xl
или shadow-2xl
для применения теней внешнего блока разного размера к элементу.
shadow-md
shadow-lg
shadow-xl
shadow-2xl
<div class="shadow-md ..."></div>
<div class="shadow-lg ..."></div>
<div class="shadow-xl ..."></div>
<div class="shadow-2xl ..."></div>
Используйте утилиту shadow-inner
, чтобы применить к элементу тонкую тень вставки. Это может быть полезно для таких вещей, как элементы управления формы или колодцы.
shadow-inner
<div class="shadow-inner ..."></div>
Используйте shadow-none
, чтобы удалить существующую тень блока из элемента. Это чаще всего используется для удаления тени, которая была применена в меньшей контрольной точке.
shadow-none
<div class="shadow-none ..."></div>
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:shadow-lg
to only apply the shadow-lg
utility on hover.
<div class="shadow hover:shadow-lg">
<!-- ... -->
</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:shadow-lg
to apply the shadow-lg
utility at only medium screen sizes and above.
<div class="shadow md:shadow-lg">
<!-- ... -->
</div>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.
По умолчанию Tailwind предоставляет шесть утилит отбрасывания теней, одну утилиту внутренней тени и утилиту для удаления существующих теней. Вы можете настроить эти значения, отредактировав theme.boxShadow
или theme.extend.boxShadow
в вашем файле tailwind.config.js
.
Если предоставляется тень DEFAULT
, она будет использоваться для утилиты shadow
без суффикса. Любые другие ключи будут использоваться как суффиксы, например, ключ '2'
создаст соответствующую утилиту shadow-2
.
module.exports = {
theme: {
extend: {
boxShadow: {
'3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
}
}
}
}
Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.
If you need to use a one-off box-shadow
value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.
<div class="shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]">
<!-- ... -->
</div>
Learn more about arbitrary value support in the arbitrary values documentation.