【问题标题】：Make gradient in dark mode `background-image` work with simple background `background-color` in light mode in Tailwind CSS?在 Tailwind CSS 的浅色模式下，使暗模式“背景图像”中的渐变与简单背景“背景颜色”一起工作？
【发布时间】：2021-10-06 12:41:37
【问题描述】：

我有一个 div 类 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

在新窗口中打开，因为 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

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

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

光照模式（第一个框在光照模式下看起来正确）

暗模式（暗模式下第一个框看起来不正确。实际上应该看起来像第二个框）

【问题讨论】：

标签： css tailwind-css

【解决方案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

【讨论】：