Next.js无法正常渲染全部Tailwind CSS颜色问题求助

尝试渲染所有Tailwind CSS颜色时，颜色时常缺失，最终仅能随机显示少数颜色。手动逐个使用颜色类时显示正常，但通过map循环渲染则无法正常显示。已添加key属性并刷新页面，问题仍未解决。

相关代码 #

export function Twcolors(props: TwcolorsProps) {
  const colors = ['', 'slate', 'gray', 'zinc', 'neutral', 'stone', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
  return (
    <>
      <main className="flex w-screen flex flex-col items-center justify-center">
        <h1 className="text-4xl mt-3 font-extrabold text-gray-900 tracking-tight text-indigo-500">
          Tailwind CSS
          Colors</h1>
        <p className="my-4 text-center leading-loose">
          <code className="bg-gray-200 px-3 py-1 rounded-lg">-inherit</code>
          <code className="bg-gray-200 px-3 py-1 rounded-lg">-current</code>
          <code className="bg-gray-200 px-3 py-1 rounded-lg">-transparent</code>
          <code
            className="bg-gray-200 px-3 py-1 rounded-lg">-black</code>
          <code
            className="bg-gray-200 px-3 py-1 rounded-lg">-white</code>
          <br/>as well as the following:</p>


        <div className="bg-neutral-300"> Some</div>
        {
          colors.map(
            (color) => (
             
              <div key={color.toString()} className="grid grid-rows-10 grid-flow-col items-left">
                <h2 key={color.toString()}>{color} {`bg-${color}-50`}</h2>
                <div key={color.toString()}
                     className={`h-12 w-24 m-1 flex items-center justify-center rounded-xl bg-${color}-50`}>50
                </div>
                <div key={color.toString()}
                     className={`h-12 w-24 m-1 flex items-center justify-center rounded-xl bg-${color}-100`}>100
                </div>
                <div key={color.toString()}
                     className={`h-12 w-24 m-1 flex items-center justify-center rounded-xl bg-${color}-200`}>200
                </div>
                <div key={color.toString()}
                     className={`h-12 w-24 m-1 flex items-center justify-center rounded-xl bg-${color}-300`}>300
                </div>
                
              </div>


            )
          )
        }

      </main>

    </>

  )
    ;
}

export default Twcolors;

效果说明 #

渲染结果仅随机显示少数颜色区块，多数颜色对应的背景色未生效。

问题核心原因是Tailwind CSS的JIT编译模式仅打包代码中明确出现的类名，通过模板字符串动态生成的类名（如bg-${color}-50）无法被Tailwind编译时识别，因此不会被打包到最终CSS文件，导致样式缺失。

方法一：配置safelist强制打包类 #

在tailwind.config.js中，将所有需要用到的颜色类添加到safelist，让Tailwind强制打包这些类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  safelist: [
    // 遍历颜色和明度值，生成所有需要的类名
    ...['slate', 'gray', 'zinc', 'neutral', 'stone', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'].flatMap(color => 
      [50, 100, 200, 300].map(shade => `bg-${color}-${shade}`)
    )
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

注：原colors数组中的空字符串会生成bg--50这类无效类，建议直接移除。

方法二：提前声明所有类 #

在组件中添加隐藏元素，提前写出所有需要的颜色类，让Tailwind编译时能识别：

// 新增隐藏元素，包含所有需要的颜色类
<div className="hidden">
  {['slate', 'gray', 'zinc', 'neutral', 'stone', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'].map(color => 
    [50,100,200,300].map(shade => (
      <span key={`${color}-${shade}`} className={`bg-${color}-${shade}`}></span>
    ))
  )}
</div>

额外优化 #

1. 移除colors数组中的空字符串，避免生成无效类；
2. 循环中仅需给最外层元素添加唯一key，不需要给每个子元素重复添加相同key。

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