Тень

Внешняя тень

Используйте утилиты shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl или shadow-2xl для применения теней внешнего блока разного размера к элементу.

Внутренняя тень

Используйте утилиту shadow-inner, чтобы применить к элементу тонкую тень вставки. Это может быть полезно для таких вещей, как элементы управления формы или колодцы.

Без тени

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

Адаптивность

Чтобы управлять тенью элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите теневого копирования. Например, используйте md:shadow-lg, чтобы применить утилиту shadow-lg только при средних размерах экрана и выше.

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

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

Кастомизация

Тени элемента

По умолчанию Tailwind предоставляет шесть утилит отбрасывания теней, одну утилиту внутренней тени и утилиту для удаления существующих теней. Вы можете изменить, добавить или удалить их, отредактировав раздел theme.boxShadow в вашей конфигурации Tailwind.

Если предоставляется тень DEFAULT, она будет использоваться для утилиты shadow без суффикса. Любые другие ключи будут использоваться как суффиксы, например, ключ '2' создаст соответствующую утилиту shadow-2.

  // tailwind.config.js
  module.exports = {
    theme: {
      boxShadow: {
        sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
        DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
        md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
        lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
        xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
        '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+       '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
        inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
        none: 'none',
      }
    }
  }

Варианты

По умолчанию, только responsive, group-hover, focus-within, hover и focus варианты создаются для утилит box shadow.

Вы можете контролировать, какие варианты создаются для утилит box shadow для изменения свойства boxShadow в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты active:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       boxShadow: ['active'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения box shadow, Вы можете полностью отключить их, установив для boxShadow свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     boxShadow: false,
    }
  }