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

问题描述

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