Tailwind深色模式下修改div背景渐变问题求助

问题原因 #

CSS 里，背景渐变属于 background-image 属性，纯色背景属于 background-color 属性。由于 background-image 会绘制在 background-color 之上，所以即便你加了 bg-black，也会被之前的渐变背景挡住，显示不出来。而两个渐变类能覆盖是因为它们都属于 background-image，后声明的样式优先级更高，会替换掉前面的渐变。

解决方案 #

方案1：清除渐变后设置纯色

用 dark:bg-none 先清除深色模式下的背景渐变（把 background-image 设为 none），再添加 dark:bg-black 就能让纯色背景生效：

<div class="mt-5 border border-gray-300 p-2 bg-gradient-to-b from-gray-100 via-purple-50 to-gray-50 rounded-lg mb-8 p-4 dark:bg-none dark:bg-black">
</div>

方案2：将深色模式下的渐变改为全黑

既然渐变优先级更高，直接把深色模式下的渐变起始、中间、结束色都设为黑色，视觉上就和纯色背景一致了：

<div class="mt-5 border border-gray-300 p-2 bg-gradient-to-b from-gray-100 via-purple-50 to-gray-50 rounded-lg mb-8 p-4 dark:from-black dark:via-black dark:to-black">
</div>

内容的提问来源于stack exchange，提问作者anton37