如何在Tailwind CSS v4.1中实现暗黑模式全局平滑颜色过渡？

问题描述 #

使用Tailwind CSS v4.1构建暗黑模式切换功能，切换逻辑正常，但颜色切换为瞬间变化，无法实现平滑渐变过渡。

代码示例 #

JavaScript 代码 #

document.addEventListener("DOMContentLoaded", () => {
  const darkModeSwitch = document.getElementById("dark-mode-switch");
  const html = document.documentElement;

  // 加载保存的主题
  const savedTheme = localStorage.getItem("theme");
  if (savedTheme === "dark") {
    html.setAttribute("data-theme", "dark");
    darkModeSwitch.checked = true;
  } else {
    html.setAttribute("data-theme", "light");
    darkModeSwitch.checked = false;
  }

  // 切换主题
  darkModeSwitch.addEventListener("change", () => {
    if (darkModeSwitch.checked) {
      html.setAttribute("data-theme", "dark");
      localStorage.setItem("theme", "dark");
    } else {
      html.setAttribute("data-theme", "light");
      localStorage.setItem("theme", "light");
    }
  });
});

HTML 代码 #

<html lang="en" class="transition-colors duration-500 ease-linear">
  <head>
    <script src="https://unpkg.com/@tailwindcss/browser"></script>
  </head>
  <body class="bg-gray-500 dark:bg-gray-800">
    <div class="flex h-[100vh] flex-col items-center justify-center gap-3">
      <div class="flex flex-col items-center gap-3 text-2xl font-[300] text-black dark:text-white">
        <label for="dark-mode-switch">Click To Switch</label>
        <input type="checkbox" id="dark-mode-switch" class="size-10" />
      </div>
      <div class="size-96 bg-gray-400 dark:bg-blue-900"></div>
    </div>
  </body>
</html>

自定义CSS配置（input.css） #

@import "tailwindcss";
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

环境信息 #

• Tailwind CSS版本：4.1
• 安装方式：CLI
• 浏览器：Google Chrome 139.0.7258.155
• 暗黑模式策略：自定义[data-theme]属性变体

已尝试操作 #

• 在<html>标签添加transition-colors duration-500 ease-linear类
• 尝试为<body>及其他元素添加transition-colors类
• 验证Tailwind编译正常，暗黑模式切换功能可正常工作
• 颜色仍为瞬间切换，无平滑过渡效果

解决方案 #

方法一：使用CSS自定义属性实现全局过渡（推荐） #

通过统一管理颜色变量，让所有使用变量的元素自动继承过渡效果，无需逐个添加过渡类：

1. 修改input.css，定义颜色变量并设置全局过渡：

@import "tailwindcss";

/* 浅色主题变量 */
:root {
  --bg-body: theme('colors.gray.500');
  --bg-card: theme('colors.gray.400');
  --text-primary: theme('colors.black');
}

/* 深色主题变量 */
[data-theme="dark"] {
  --bg-body: theme('colors.gray.800');
  --bg-card: theme('colors.blue.900');
  --text-primary: theme('colors.white');
}

/* 全局过渡：所有使用自定义变量的元素都会应用过渡 */
* {
  transition: color 0.5s linear, background-color 0.5s linear;
}

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

2. 调整HTML，使用自定义变量替代原有的颜色类：

<html lang="en">
  <head>
    <script src="https://unpkg.com/@tailwindcss/browser"></script>
  </head>
  <body class="bg-[var(--bg-body)]">
    <div class="flex h-[100vh] flex-col items-center justify-center gap-3">
      <div class="flex flex-col items-center gap-3 text-2xl font-[300] text-[var(--text-primary)]">
        <label for="dark-mode-switch">Click To Switch</label>
        <input type="checkbox" id="dark-mode-switch" class="size-10" />
      </div>
      <div class="size-96 bg-[var(--bg-card)]"></div>
    </div>
  </body>
</html>

方法二：为每个颜色变化的元素添加过渡类 #

如果不想使用自定义变量，可以给所有包含dark:前缀颜色类的元素单独添加过渡类（过渡属性不会被子元素继承）：

<html lang="en">
  <head>
    <script src="https://unpkg.com/@tailwindcss/browser"></script>
  </head>
  <body class="bg-gray-500 dark:bg-gray-800 transition-colors duration-500 ease-linear">
    <div class="flex h-[100vh] flex-col items-center justify-center gap-3">
      <div class="flex flex-col items-center gap-3 text-2xl font-[300] text-black dark:text-white transition-colors duration-500 ease-linear">
        <label for="dark-mode-switch">Click To Switch</label>
        <input type="checkbox" id="dark-mode-switch" class="size-10" />
      </div>
      <div class="size-96 bg-gray-400 dark:bg-blue-900 transition-colors duration-500 ease-linear"></div>
    </div>
  </body>
</html>

问题根源解释 #

之前在<html>标签添加过渡类无效，是因为过渡属性不会被子元素继承，<html>的过渡仅作用于它自身的样式变化，而页面中body、文本、卡片的颜色变化属于各自元素的样式，因此需要单独为这些元素设置过渡，或者通过自定义变量的方式让过渡逻辑统一生效。

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