为何不加该行代码，Toast组件暗黑主题就无法正常工作？

问题背景 #

给网站实现暗黑主题后，发现Toast消息在暗黑模式下无法正常显示，排查后发现动态生成的error_dark、warning_dark这类类名未被Tailwind编译生效，临时添加了一个包含所有暗黑类名的隐藏span才解决问题，现寻求更优雅的解决方案。

临时解决代码 #

<ToastContext.Provider value={value}>
  {children}
  {/* 不加这行暗黑模式Toast就失效 */}
  <span className='hidden error_dark warning_dark info_dark success_dark' />
  {toastQueue.map(({ id, props }) => {
    const { severity, ...rest } = props;
    const style = `${severity}${theme === 'dark' ? '_dark' : ''}`;
    return (
      <div key={id} className={`${style}`}>
        <Toast {...rest} />
      </div>
    );
  })}
</ToastContext.Provider>

问题根源 #

Tailwind的JIT（即时编译）模式会通过静态扫描代码，自动清除未被检测到实际使用的CSS类。由于Toast的暗黑类名是通过字符串拼接动态生成的（比如${severity}_dark），Tailwind的静态分析无法识别这些类的存在，因此会将它们从最终CSS中移除，导致暗黑模式下Toast没有对应样式。

更优解决方案 #

方案1：改用Tailwind官方暗黑模式语法（推荐） #

放弃自定义的xxx_dark类名，改用Tailwind原生的dark:前缀编写暗黑样式，这样Tailwind能直接识别到类的存在，无需额外处理。

首先确保tailwind.config.js中正确配置暗黑模式：

module.exports = {
  darkMode: 'class', // 根据你的主题切换逻辑选择`class`或`media`
  // ...其他配置项
}

随后重构Toast的样式写法，示例如下：

// 假设常规模式下error类为bg-red-500 text-white，暗黑模式为bg-red-900 text-red-100
<div key={id} className="bg-red-500 text-white dark:bg-red-900 dark:text-red-100">
  <Toast {...rest} />
</div>

当主题切换时，只要在根元素（如<html>）添加dark类，dark:前缀的样式就会自动生效，无需动态拼接类名，也不用保留隐藏span。

方案2：将动态类加入Tailwind安全列表 #

如果不想修改现有类名结构，可直接在tailwind.config.js中把动态生成的暗黑类加入safelist，告知Tailwind不要删除这些类：

module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  safelist: [
    'error_dark',
    'warning_dark',
    'info_dark',
    'success_dark'
  ],
  // ...其他配置项
}

配置完成后，即使类名是动态生成的，Tailwind也会保留对应的CSS规则，此时即可删除那个隐藏的span元素。

内容的提问来源于stack exchange，提问作者mahdi ebrp