如何使用 Tailwind css 添加多个框阴影？

Question

我想使用 tailwind css 提供 2 个盒子阴影

CSS：

button{
     box-shadow: inset 0px 0px 0px 1px var(--primary-500), inset 0px 0px 0px 2px red;
      }

这就是我使用 tailwind css 能够实现的目标：

<button class="shadow-[inset_0_0_0_1px_var(--primary-500)]"> Hello World! </button>

Answer 1

要使用多个盒子阴影，您可以在方括号内使用逗号分隔的盒子阴影值。

<button
 class="shadow-[inset_0_0_0_1px_var(--primary-500),inset_0px_0px_0px_2px_red]">
 Hello World!
</button>

Answer 2

Tailwind 附带的阴影类使用多个阴影，例如该类在 CSS 中shadow转换box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);。

如果您需要添加额外的阴影或自定义这些值，您可以通过编辑theme.boxShadow或theme.extend.boxShadow在tailwind.config.js文件中执行此操作。

如果DEFAULT提供了阴影，它将用于无后缀的阴影实用程序。任何其他键将用作后缀，例如该键'2'将创建相应的shadow-2实用程序。