顺风盒阴影

Answer 1

不可能在

shadow

的中心用

div

的选择做

tailwind

，所以你必须自己做一个

custom shadow

，这在

tailwind

中是可能的，如下所示：

<div class="bg-white drop-shadow-[0_0px_10px_rgba(0,0,0,0.25)] rounded-md">
        <p>Hello</p>
</div>

或者您可以转到

tailwind.config.js

并添加一些自定义 CSS，例如：

module.exports = {
  theme: {
    extend: {
      dropShadow: {
        '3xl': '0 35px 35px rgba(0, 0, 0, 0.25)',
        '4xl': [
            '0 35px 35px rgba(0, 0, 0, 0.25)',
            '0 45px 65px rgba(0, 0, 0, 0.15)'
        ]
      }
    }
  }
}

或者另一种选择是创建另一个 CSS 文件（如果您已经创建了则无需创建另一个 CSS 文件）。然后添加这个：

.customShadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

然后至于

html

文件：

<div class="bg-white customShadow rounded-md">
        <p>Hello</p>
</div>

Answer 2

虽然上面接受的答案足够正确，但还有一些更重要的细节：

1. 如果你查看顺风文档

注意阴影大小 md、lg 和 xl 如何传递两组值，而不是一组值。

2. 显然

   box-shadow

   CSS 属性可以接受多于一组的值！

用例： 假设您尝试在底部对齐的导航栏上应用shadow-md，在这种情况下，您需要阴影位于导航栏上方（而不是下方）。

为了让它正确，你需要这样的东西：

shadow-[0px_-4px_6px_-1px_rgba(0,0,0,0.1),0px_-2px_4px_-2px_rgba(0,0,0,0.1)]

也不知何故：

shadow-[rgba(0,0,0,0.1)_0px_-4px_6px_-1px,rgba(0,0,0,0.1)_0px_-2px_4px_-2px]

（注意相反的顺序）似乎也工作得很好！