jsx - Dark variant with background images in Tailwind

Question

I tried using different background images depending on the mode (default & dark). It seems that the dark variant isn't working as soon as I use a custom image. I added variants following Tailwind's 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 file

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

Answer 1

Solved it!

I changed the JSX code to :

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