如何使用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>

- Deepak Singh

Answer 1

要使用多个阴影，您可以在方括号中使用用逗号分隔的 box-shadow 值。

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

- Aga

---

Aga的示例适用于使用任意值。如果您想添加自定义类或修改Tailwind 默认值，则Luke的信息仍然相关。 - kenput3r

Answer 2

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

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

如果提供了默认阴影，则将用于非后缀阴影实用程序。任何其他键都将用作后缀，例如键'2'将创建相应的shadow-2实用程序。

- Luke

---

有没有一种方法可以自定义 tailwind 配置，使得 DEFAULT 或者 lg 之类的样式有两个自定义阴影？ - Justin

没事了，在这里找到了：https://design2tailwind.com/blog/tailwindcss-box-shadows-how-to/ - Justin