Box Shadow — Tailwind CSS

Быстрый справочник

Класс	Свойства
shadow-sm	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
shadow	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
shadow-md	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
shadow-lg	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
shadow-xl	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
shadow-2xl	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
shadow-inner	box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
shadow-none	box-shadow: 0 0 #0000;

Базовое использование

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

Используйте утилиты shadow-sm, shadow, 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 для применения тонкой внутренней тени к элементу. Это полезно для элементов управления формами или полей.

<div class="shadow-inner ..."></div>

Удаление тени

Используйте shadow-none для удаления существующей тени от элемента. Чаще всего используется для удаления тени, применённой на меньших размерах экрана.

<div class="shadow-none ..."></div>

Условное применение

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

Tailwind позволяет условно применять утилиты в различных состояниях, используя модификаторы вариантов. Например, используйте hover:shadow-lg для применения утилиты shadow-lg только при наведении.

<div class="shadow hover:shadow-lg">
  <!-- ... -->
</div>

Полный список доступных модификаторов состояний можно найти в документации по Наведению, фокусу и другим состояниям.

Точки разрыва и медиа-запросы

Вы также можете использовать модификаторы вариантов для указания медиа-запросов, таких как точки разрыва адаптивности, тёмная тема, предпочтения уменьшения анимации и многое другое. Например, используйте md:shadow-lg для применения утилиты shadow-lg только при размерах экрана среднего и выше.

<div class="shadow md:shadow-lg">
  <!-- ... -->
</div>

Дополнительную информацию можно найти в документации по Реагированию на размеры экрана, Тёмной теме и другим модификаторам медиа-запросов.

Использование пользовательских значений

Настройка темы

По умолчанию 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)',
      }
    }
  }
}

Дополнительную информацию о настройке темы по умолчанию можно найти в документации по настройке темы по умолчанию.

Произвольные значения

Если вам нужно использовать отдельное значение box-shadow, которое не имеет смысла включать в вашу тему, используйте квадратные скобки для динамического создания свойства с любым произвольным значением.

<div class="shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]">
  <!-- ... -->
</div>

Дополнительную информацию о поддержке произвольных значений можно найти в документации по произвольным значениям.