在 Tailwind CSS 中，使暗模式“背景图像”中的渐变与浅色模式下的简单背景“背景颜色”一起工作？

Question

我有一个 div 和 class bg-blue-100 text-blue-900 dark:bg-info 其中 bg-info 是 linear-gradient(to right, hsla(240, 100%, 50%, 0.2), transparent 50%)

我的灯光模式工作正常，但 dark:bg-info 不工作，因为它使用 background-image CSS 属性而不是 background-color CSS 属性用于灯光模式。

如何使用深色模式？深色模式下 background-image 和浅色模式下 background-color 之间存在冲突。

如何解决？

我制作了一个展示问题的 Stackblitz 演示 -> https://stackblitz.com/edit/github-6frqvs-tqnsnl?file=pages%2Findex.tsx

在新 Window 中打开，因为 Tailwind 黑暗模式不会在 Stackblitz 上并排显示。

请注意，尽管代码为：

，但它在深色模式下如何不显示蓝色渐变

<div className="p-4 m-4 h-20 w-96 bg-red-400 text-red-900 dark:bg-info">Hello hi</div>

编辑：

我已经设法让暗模式在 Tailwind Play 上运行所以这里是演示 -> https://play.tailwindcss.com/fecClyOaIZ

只选中第一个框。第二个方框展示了它在深色模式下的真实外观。

在深色模式下，第一个框应该看起来像带有黑色渐变的深蓝色（参见第二个框）

灯光模式（第一个盒子在灯光模式下看起来正确）

深色模式（第一个盒子在深色模式下看起来不正确。实际上应该看起来像第二个盒子）

Answer 1

诀窍是使用 dark:bg-transparent，因为 CSS 允许同时使用 background-color 和 background-image。

<div class="h-screen m-0 p-0 dark:bg-black">
  <div class="flex flex-col justify-center items-center mx-20 text-center h-full">
    <div class="px-4 py-4 rounded-md bg-pink-100 text-pink-900 dark:bg-info dark:bg-transparent dark:text-white">This shouldn't look like this in Dark Mode</div>
    <button id="toggleDark" class="inline-flex justify-center px-4 py-2 text-sm font-medium mt-8 text-green-900 bg-green-100 border border-transparent rounded-md hover:bg-green-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500" onclick="document.documentElement.classList.toggle('dark');">Toggle Dark Mode</button>
    <div class="px-4 py-4 rounded-md dark:bg-info mt-8 dark:text-white">It should look like this in Dark Mode</div>
  </div>
</div>

顺风游戏 -> https://play.tailwindcss.com/ZWl7ZBwqnQ

在 Tailwind CSS 中，使暗模式“背景图像”中的渐变与浅色模式下的简单背景“背景颜色”一起工作？

Make gradient in dark mode `background-image` work with simple background `background-color` in light mode in Tailwind CSS?

css

tailwind-css

编辑：

灯光模式（第一个盒子在灯光模式下看起来正确）

深色模式（第一个盒子在深色模式下看起来不正确。实际上应该看起来像第二个盒子）