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

Question

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

您可以找到完整的代码 here。

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

我尝试使用

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

我也试过使用 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，它包含彩色阴影。参考 link - https://tailwindcss.com/docs/box-shadow-color

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

How do I make white shadows in Tailwind CSS?

javascript

css

reactjs

tailwind-css