如何在不提升最低浏览器版本要求的前提下使用light-dark()颜色函数？

我太懂这种纠结了——light-dark()那种一行就能把明暗主题色写清楚的写法真的很顺手，但它属于2024浏览器基线要求，会把Tailwind CSS v4原本的兼容门槛（Chrome 111+、Safari 16.4+、Firefox 128+）拔高到Chrome 123+、Safari 17.5+，确实会劝退部分用户。

先理清楚现状：Tailwind v4底层依赖的LightningCSS其实支持把light-dark()转译成兼容旧版的代码，但官方为了整体兼容性，直接把这个功能禁用了（还有相关issue跟踪优化构建中light-dark()失效的问题）。不过我们完全可以用Tailwind的自定义能力，模拟出light-dark()的一行式体验，同时完全贴合v4原本的兼容基线。

核心解决方案：自定义主题+变体模拟light-dark()体验 #

我们可以通过Tailwind的自定义主题、自定义变体，把明暗色值写在视觉上的同一行，配合类切换逻辑实现明暗适配，全程不依赖原生light-dark()函数，完美兼容v4的原始基线版本。

以下是完整可运行的代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- 引入Tailwind v4的浏览器端运行时 -->
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  
  <style type="text/tailwindcss">
    <!-- 自定义暗模式变体，对齐Tailwind默认的.dark类逻辑 -->
    @custom-variant dark (&:where(.dark, .dark *));

    <!-- 自定义主题色，模拟light-dark()的一行式明暗色定义体验 -->
    @theme {
      --color-primary: #da373d;
      @variant dark { --color-primary: #fd96b0; }
      <!-- 视觉上更贴近light-dark()的写法可以这样排版：
      --color-primary: #da373d; @variant dark { --color-primary: #fd96b0; }
      -->
    }

    <!-- 通过color-scheme确保明暗色值正确触发 -->
    * {
      color-scheme: light;
      @variant dark { color-scheme: dark; }
    }
  </style>
</head>
<body>
  <h1 class="m-4 text-primary text-3xl font-bold underline">
    Hello world!
  </h1>
  <button class="m-4 px-4 py-2 bg-sky-700 hover:bg-sky-950 text-sky-50 rounded-md cursor-pointer">
    切换明暗模式
  </button>

  <script>
    <!-- 保留原本的暗模式切换逻辑 -->
    document.querySelector('button').addEventListener('click', () => {
      document.documentElement.classList.toggle('dark');
    });
  </script>
</body>
</html>

方案细节说明 #

1. 自定义dark变体：@custom-variant dark (&:where(.dark, .dark *))让自定义主题色能正确作用于.dark类下的所有元素，和Tailwind默认的暗模式逻辑完全对齐。
2. 一行式明暗色定义：在@theme配置中，我们把明暗色值写在相邻位置（甚至可以排版成同一视觉行），完美模拟light-dark(#亮色调, #暗色调)的直观性，不用分开在两处定义主题色。
3. 无原生函数依赖：全程不使用原生light-dark()函数，完全通过CSS变量+Tailwind变体实现适配，严格遵守v4的原始兼容基线。
4. 兼容原有切换逻辑：保留了原本的.dark类切换代码，和你之前的开发习惯完全一致，不需要额外学习成本。

这个方案既保留了light-dark()最吸引人的“一眼看全明暗色”的体验，又完全避免了提升浏览器兼容门槛的问题，完美解决你的需求。

内容来源于stack exchange