Краткая справка

Класс
Свойства
shadow-smbox-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
shadowbox-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
shadow-mdbox-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
shadow-lgbox-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
shadow-xlbox-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
shadow-2xlbox-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
shadow-innerbox-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
shadow-nonebox-shadow: 0 0 #0000;

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

Добавление внешней тени

Используйте утилиты 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.

tailwind.config.js
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.