Tailwindcss 背景图像在暗模式下不起作用

【问题标题】：Tailwindcss background-image not working in dark modeTailwindcss 背景图像在暗模式下不起作用
【发布时间】：2022-02-15 07:14:27
【问题描述】：

我的 Tailwind 类定义如下：

<section class="dark:bg-gray-900 bg-hero-image bg-fixed">

因此，在浅色版本中显示背景图像，而在深色版本中，仅 gray-900 作为背景颜色。
图像在tailwind.config.js 中定义如下：

theme: {
    extend: {
      backgroundImage: {
        'hero-image': "url('/header.jpg')"
      },

但这不起作用，仍然在暗模式下显示图像。

【问题讨论】：

【解决方案1】：

您必须将backgroundImage 添加到tailwind.config.js 中的variants：

module.exports = {
  variants: {
    extend: {
      backgroundImage: ["dark"],
    },
  },

ALSO您必须添加dark:bg-none，才能将background-image 设置为none。

<section class="dark:bg-gray-900 dark:bg-none bg-hero-image bg-fixed">

【讨论】：