Tailwind 中带有背景图像的深色变体答案

【问题标题】：Dark variant with background images in TailwindTailwind 中带有背景图像的深色变体
【发布时间】：2021-04-07 02:55:33
【问题描述】：

我尝试根据模式（默认和深色）使用不同的背景图像。一旦我使用自定义图像，似乎黑暗变体就不起作用。我在 Tailwind 的 instructions 之后添加了变体。

tailwind.config.js

module.exports = {
    important: true,
    // Active dark mode on class basis
    darkMode: "class",
    i18n: {
        locales: ["en-US"],
        defaultLocale: "en-US",
    },
    purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    theme: {
        extend: {
            backgroundImage: theme => ({
                'ysosb': "url('./images/y-so-serious.png')",
                'ysosw': "url('./images/y-so-serious-white.png')",
            })
        }
    },
    variants: {
        extend: {
            backgroundColor: ["checked"],
            backgroundImage: ["dark"],
            borderColor: ["checked"],
            inset: ["checked"],
            zIndex: ["hover", "active"],
        },
    },
    plugins: [],
    future: {
        purgeLayersByDefault: true,
    },
};

JSX 文件

<section className="dark:bg-ysosb bg-ysosw shadow">
...
</section>

【问题讨论】：

解决了！我将 JSX 代码更改为：<section bg-ysosw dark:bg-ysosb shadow text-black dark:text-white></section>
请将您的评论移至（自行发布的）答案，并将其标记为已接受
太好了，谢谢！确保也将其标记为“已接受”（有一天）...

标签： jsx background-image variant tailwind-css

【解决方案1】：

解决了！

我将 JSX 代码更改为：

<section bg-ysosw dark:bg-ysosb shadow text-black dark:text-white>
...
</section>

【讨论】：