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

Question

我目前正在制作具有明暗模式的投资组合网站。在灯光模式下，网站上的卡片有阴影，以营造与背景的距离感。我想在黑暗模式下制作同样的效果，但我不知道如何在顺风中制作白色阴影。我查看了文档以及类似主题的其他问题，但仍然没有运气。

您可以找到完整代码here。

这是我迄今为止尝试过的：

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)
      },
    },
  },

1. 我也尝试过使用 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