盒阴影

Outer shadow（外阴影）

使用 .shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, 或 .shadow-2xl 等功能类来应用不同大小的外框阴影到一个元素上。

Inner shadow （内阴影）

使用 shadow-inner 功能类为元素应用一个微妙的插入框阴影。这对表单控件或井等元素很有用。

No shadow（无阴影）

使用 shadow-none 从元素中移除现有的盒状阴影。这最常见的是用来移除应用在较小断点上的阴影。

响应式

要在特定的断点处控制元素的阴影，请在任何现有的阴影功能中添加 {screen}: 前缀。例如，使用 md:shadow-lg 来应用 shadow-lg 功能在中等大小的屏幕和更大的屏幕上。

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

关于 Tailwind 的响应式设计功能的更多信息，请查看响应式设计文档。

自定义

Box Shadows

默认情况下，Tailwind 提供了三个 drop shadow 功能，一个内部阴影功能，和一个删除现有阴影的功能。您可以通过编辑您的 Tailwind 配置中的 theme.boxShadow 部分来改变，添加或删除这些功能。

如果提供了一个 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)',
-       outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
+       focus: '0 0 0 3px rgba(66, 153, 225, 0.5)',
        none: 'none',
      }
    }
  }

变体

默认情况下， 针对 box shadow 功能类，只生成 responsive, group-hover, focus-within, hover and focus 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 boxShadow 属性来控制为 box shadow 功能生成哪些变体。

例如，这个配置也将生成 active 变体:

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

禁用

如果您不打算在您的项目中使用 box shadow 功能，您可以通过在配置文件的 corePlugins 部分将 boxShadow property to false in the corePlugins section of your config file:

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