Tailwind CSS暗黑模式自定义类失效：原因排查及修复方法

1. Tailwind不识别自定义类的dark:前缀：Tailwind的dark:变体仅对框架内置类生效，自定义CSS类无法直接通过dark:前缀触发暗黑模式样式，直接写dark:zz3d会被Tailwind忽略，编译后不会生成对应的样式。
2. 自定义类内属性冗余：.zz3d中的background-color: #ffffff会被后续的复合background属性完全覆盖，属于无效代码，不影响功能但可以删除。

下面提供两种实用的修复方式，按需选择：

方式一：直接编写暗黑模式专属自定义类（无需修改Tailwind配置） #

步骤1：修改自定义CSS #

根据你使用的暗黑模式类型（类模式/媒体查询模式）编写对应样式：

• 如果是类模式（已在tailwind.config.js中设置darkMode: 'class'）：

/* 默认模式样式 */
.zz3d-light {
  background: linear-gradient(135deg, #4acab355 25%, transparent 25%) -12px 0/
      24px 24px,
    linear-gradient(225deg, #4acab3 25%, transparent 25%) -12px 0/ 24px 24px,
    linear-gradient(315deg, #4acab355 25%, transparent 25%) 0px 0/ 24px 24px,
    linear-gradient(45deg, #4acab3 25%, #ffffff 25%) 0px 0/ 24px 24px;
  opacity: 0.8;
}

/* 暗黑模式样式 */
.dark .zz3d-dark {
  background: linear-gradient(135deg, #4acab355 25%, transparent 25%) -12px 0/
      24px 24px,
    linear-gradient(225deg, #4acab3 25%, transparent 25%) -12px 0/ 24px 24px,
    linear-gradient(315deg, #4acab355 25%, transparent 25%) 0px 0/ 24px 24px,
    linear-gradient(45deg, #4acab3 25%, #1f2937 25%) 0px 0/ 24px 24px; /* 替换为深色背景 */
  opacity: 0.8;
}

• 如果是媒体查询模式（Tailwind默认）：

.zz3d-light {
  background: linear-gradient(135deg, #4acab355 25%, transparent 25%) -12px 0/
      24px 24px,
    linear-gradient(225deg, #4acab3 25%, transparent 25%) -12px 0/ 24px 24px,
    linear-gradient(315deg, #4acab355 25%, transparent 25%) 0px 0/ 24px 24px,
    linear-gradient(45deg, #4acab3 25%, #ffffff 25%) 0px 0/ 24px 24px;
  opacity: 0.8;
}

@media (prefers-color-scheme: dark) {
  .zz3d-dark {
    background: linear-gradient(135deg, #4acab355 25%, transparent 25%) -12px 0/
        24px 24px,
      linear-gradient(225deg, #4acab3 25%, transparent 25%) -12px 0/ 24px 24px,
      linear-gradient(315deg, #4acab355 25%, transparent 25%) 0px 0/ 24px 24px,
      linear-gradient(45deg, #4acab3 25%, #1f2937 25%) 0px 0/ 24px 24px;
    opacity: 0.8;
  }
}

步骤2：修改HTML #

<div className="w-screen gap-8 h-screen bg-white dark:bg-[#1f2937] flex flex-col justify-center items-center zz3d-light zz3d-dark">

方式二：把自定义类注册为Tailwind工具类（支持dark:前缀） #

步骤1：修改Tailwind配置文件 #

确保已启用类模式（如果需要），并扩展变体：

module.exports = {
  darkMode: 'class', // 可选，根据你的暗黑模式类型设置
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      backgroundImage: ['dark'], // 为背景图属性添加暗黑变体
      opacity: ['dark'],
    },
  },
  plugins: [],
}

步骤2：在CSS中用@layer注册自定义工具类 #

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .zz3d {
    opacity: 0.8;
    background: linear-gradient(135deg, #4acab355 25%, transparent 25%) -12px 0/
        24px 24px,
      linear-gradient(225deg, #4acab3 25%, transparent 25%) -12px 0/ 24px 24px,
      linear-gradient(315deg, #4acab355 25%, transparent 25%) 0px 0/ 24px 24px,
      linear-gradient(45deg, #4acab3 25%, #ffffff 25%) 0px 0/ 24px 24px;
  }

  .dark\:zz3d {
    background: linear-gradient(135deg, #4acab355 25%, transparent 25%) -12px 0/
        24px 24px,
      linear-gradient(225deg, #4acab3 25%, transparent 25%) -12px 0/ 24px 24px,
      linear-gradient(315deg, #4acab355 25%, transparent 25%) 0px 0/ 24px 24px,
      linear-gradient(45deg, #4acab3 25%, #1f2937 25%) 0px 0/ 24px 24px;
  }
}

步骤3：修改HTML #

现在就可以正常使用dark:zz3d前缀了：

<div className="dark:zz3d w-screen gap-8 h-screen bg-white dark:bg-[#1f2937] flex flex-col justify-center items-center">

内容的提问来源于stack exchange，提问作者YES PRO MAN Gaming