如何在 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