TailwindCSS v4.0动态自定义颜色类失效，如何迁移代码？

问题背景 #

之前通过tailwind.config.js的safelist属性添加bg-darkgreen等自定义颜色工具类，适配扩展的Tailwind颜色体系。升级到移除safelist支持的TailwindCSS v4.0后该方案失效：导航栏循环生成的bg-${element.color}动态类无法显示对应颜色，但滚动触发的静态颜色切换（如bg-tlightgreen）正常工作。导航元素的名称与颜色定义在组件外部，自定义颜色通过CSS的@theme规则声明。

现有代码 #

导航组件代码 #

import { useCallback, useEffect, useRef, useState } from "react"

export type NavElement = {
  text: string,
  color: string,
}

export default function Navbar({elements}: {elements: NavElement[]}) {

  const [scrolledPastTop, setScrolledPastTop] = useState(false);

  useEffect(() => {
    const listener = () => {
      const scrolled = document.scrollingElement?.scrollTop;
      if (scrolled && scrolled > 150) {
        setScrolledPastTop(true);
      } else {
        setScrolledPastTop(false);
      }
    };
    document.addEventListener("scroll", listener);
    return () => {
      document.removeEventListener("scroll", listener);
    }
  }, []);

  const _elements = useRef(elements.map(e => ({
    ...e,
    action: useCallback(() => {
      // do action
    }, [])
  })));

  return (
    <nav className={`flex flex-row fixed top-0 z-40 w-screen max-w-section transition-bg duration-[400ms]
      ${scrolledPastTop ? "bg-tlightgreen" : "bg-lightgreen"}
      justify-center text-2xl
      sm:justify-end sm:text-4xl
    `}>
      {
        _elements.current.map((element, idx) => (
          <button
            key={idx}
            className={`font-['Sacramento'] w-1/4 sm:w-auto py-2 px-4 transition-opacity cursor-pointer duration-[400ms]
              ${scrolledPastTop ? "opacity-85" : ""} bg-${element.color} hover:bg-h${element.color}`
            }
            onClick={element.action}
          >
            {element.text}
          </button>
        ))
      }
    </nav>
  )
}

导航元素示例 #

const navLinks = [
  { text: "link 1", color: "darkgreen" },
  { text: "link 2", color: "burgundy" },
  { text: "link 3", color: "yellow" },
  { text: "link 4", color: "palepink" },
];

CSS颜色定义（index.css） #

@theme {
  --color-darkgreen: #29382b;
  --color-lightgreen: #b4c7b4;
  --color-tlightgreen: #b4c7b47f;
  --color-burgundy: #a1411e;
  --color-yellow: #dbc88c;
  --color-palepink: #d4aa9f;
}

解决方案 #

TailwindCSS v4仅在构建阶段扫描静态类名，动态生成的类名不会被识别，以下是三种可行的适配方案：

方案1：内联Style结合CSS变量 #

利用已定义的CSS颜色变量，通过内联style直接设置背景色，同时处理hover状态：

1. 先在index.css的@theme中补充hover状态的颜色变量：

@theme {
  --color-darkgreen: #29382b;
  --color-hdarkgreen: /* 替换为你的hover颜色值 */;
  --color-lightgreen: #b4c7b4;
  --color-tlightgreen: #b4c7b47f;
  --color-burgundy: #a1411e;
  --color-hburgundy: /* 替换为你的hover颜色值 */;
  --color-yellow: #dbc88c;
  --color-hyellow: /* 替换为你的hover颜色值 */;
  --color-palepink: #d4aa9f;
  --color-hpalepink: /* 替换为你的hover颜色值 */;
}

2. 修改组件中按钮的代码：

<button
  key={idx}
  className={`font-['Sacramento'] w-1/4 sm:w-auto py-2 px-4 transition-opacity cursor-pointer duration-[400ms]
    ${scrolledPastTop ? "opacity-85" : ""}`}
  style={{
    backgroundColor: `var(--color-${element.color})`,
    transition: 'background-color 400ms'
  }}
  onMouseEnter={(e) => e.target.style.backgroundColor = `var(--color-h${element.color})`}
  onMouseLeave={(e) => e.target.style.backgroundColor = `var(--color-${element.color})`}
  onClick={element.action}
>
  {element.text}
</button>

方案2：静态声明所有需要的颜色类 #

由于导航元素的颜色是固定的，在组件中静态列出所有用到的bg-*和hover:bg-h*类，让Tailwind在构建时扫描到：

export default function Navbar({elements}: {elements: NavElement[]}) {
  // 静态声明所有需要的颜色类，供Tailwind扫描
  const _requiredColorClasses = `
    bg-darkgreen hover:bg-hdarkgreen
    bg-burgundy hover:bg-hburgundy
    bg-yellow hover:bg-hyellow
    bg-palepink hover:bg-hpalepink
  `;

  // 其他原有代码...

  return (
    <>
      {/* 隐藏元素，用于让Tailwind扫描到静态类 */}
      <div className={_requiredColorClasses} hidden />
      <nav className={`flex flex-row fixed top-0 z-40 w-screen max-w-section transition-bg duration-[400ms]
        ${scrolledPastTop ? "bg-tlightgreen" : "bg-lightgreen"}
        justify-center text-2xl
        sm:justify-end sm:text-4xl
      `}>
        {/* 原有按钮循环代码保持不变 */}
      </nav>
    </>
  )
}

方案3：在Tailwind配置中扩展颜色系统 #

放弃@theme方式，直接在tailwind.config.js中扩展颜色，再结合方案2的静态声明：

1. 修改tailwind.config.js：

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors: {
        darkgreen: '#29382b',
        hdarkgreen: /* 替换为你的hover颜色值 */,
        lightgreen: '#b4c7b4',
        tlightgreen: '#b4c7b47f',
        burgundy: '#a1411e',
        hburgundy: /* 替换为你的hover颜色值 */,
        yellow: '#dbc88c',
        hyellow: /* 替换为你的hover颜色值 */,
        palepink: '#d4aa9f',
        hpalepink: /* 替换为你的hover颜色值 */,
      },
    },
  },
};

2. 移除index.css中的@theme规则，然后按照方案2的方式静态声明所有需要的颜色类即可。

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