如何在 Tailwind CSS 中制作白色阴影？

Question

我目前正在制作一个具有浅色和深色模式的作品集网站。在浅色模式下，网站上的卡片有阴影，以产生与背景的距离感。我想在黑暗模式下做出同样的效果，但我不知道如何在顺风下制作白色阴影。我查阅了文档以及有关类似主题的其他问题，但仍然没有运气。

您可以在此处找到完整的代码。

到目前为止，这是我尝试过的：

1. 我尝试在 tailwind.config.js 中使用定义我自己的自定义阴影

theme: {
    extend: {
      boxShadow: {
        'dark-sm': '0 1px 2px 0 rgba(255, 255, 255, 0.05)', //White shadow
        blue: '0 1px 3px 0 rgba(0, 0, 255, 0.1), 0 1px 2px 0 rgba(0, 0, 255, 0.06)', //Blue shadow (for testing purposes)
      },
    },
  },

2. 我还尝试使用shadows关键字而不是boxShadow：

theme: {
    extend: {
      shadows: {
        'red': 'rgba(255, 0, 0, 0.1)', //Red shadow (for testing puposes)
      }
    },
  },

例如，当我打电话时

<div className = "dark:shadow-dark-sm">...</div>

或者

<div className = "dark:shadow-red">...</div>

即使我尝试使用不同的颜色而不是在黑暗模式下，也没有任何反应。

有一次我可以使用 boxShadow 方法更改颜色，但它不再起作用，我不知道为什么。任何帮助，将不胜感激！

Answer 1

查看最新的 Tailwind CSS v3，它包含彩色阴影。参考链接 - https://tailwindcss.com/docs/box-shadow-color