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

Question

我尝试根据模式（默认和深色）使用不同的背景图像。一旦我使用自定义图像，深色变体似乎就无法正常工作。我在 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>

Answer 1

解决了！

我将 JSX 代码更改为：

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

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

Dark variant with background images in Tailwind

background-image

variant

jsx

tailwind-css