自定义Hook中Tailwind CSS类未编译问题求助

我通过API获取了一组带属性的资产，想根据资产属性自定义列表项的背景色。我编写了AssetCard组件与useAssetColor自定义Hook，代码如下：

export function AssetCard({ asset, children, className }: AssetCardProps) {
  // 根据资产属性获取对应颜色类
  const color = useAssetColor(asset)

  return (
    <div
      className={cn(
        "relative", color ?? "bg-muted", className
      )}
    >
      {children}
    </div>
  )
}

const COLORS: Record<string, string> = {
  purple: "!bg-gradient-to-r !from-[#E526FC]/20 !to-[#2B4FFC]/20",
  green: "!bg-gradient-to-r !from-[#64FF9E]/20 !to-[#2B6F85]/20",
  yellow: "!bg-gradient-to-r !from-[#FFE4B7]/20 !to-[#B1B437]/20",
}

export const useAssetColor = (
  asset: AssetWithTradeData
) => {
  const colorAttribute = asset.metadata.attributes?.find(
    (attr: { trait_type: string }) => attr.trait_type === "Scarcity"
  )?.value as string | null | undefined

  const color = useMemo(() => {
    return colorAttribute ? COLORS[colorAttribute] : null
  }, [colorAttribute])

  return color
}

Hook会根据资产的Scarcity属性返回对应的Tailwind背景渐变类。元素的class属性已正确显示对应的类，但这些类未被Tailwind编译，样式不生效；将Hook逻辑移至组件内则正常。请问这是什么原因？

核心原因 #

Tailwind的JIT编译器依赖静态代码扫描来识别需要编译的类名——只有在编译阶段能被静态分析到的类，才会被打包进最终CSS文件。

你的问题本质是：

• 渐变类名定义在useAssetColor所在的文件中，AssetCard组件只是接收Hook返回的字符串类名，属于运行时动态值。
• Tailwind静态扫描时，无法追踪到AssetCard组件实际使用了这些渐变类，因此不会将它们编译进CSS。
• 当把逻辑移到组件内部时，类名的定义和使用都在同一个文件，Tailwind能直接扫描到这些类，自然可以正常编译。

解决方案 #

方案1：让Tailwind静态捕获类名 #

把COLORS对象移到AssetCard组件所在的文件，或者在组件文件中显式声明这些类名（哪怕是注释形式），让Tailwind的扫描工具能捕获到：

// AssetCard.tsx 文件头部添加：
/* Tailwind classes used in useAssetColor: !bg-gradient-to-r !from-[#E526FC]/20 !to-[#2B4FFC]/20 !from-[#64FF9E]/20 !to-[#2B6F85]/20 !from-[#FFE4B7]/20 !to-[#B1B437]/20 */

export function AssetCard({ asset, children, className }: AssetCardProps) {
  // ...组件逻辑
}

或者直接将COLORS对象定义在组件文件中，Hook通过导入使用。

方案2：自定义Tailwind主题（推荐） #

将渐变样式定义到tailwind.config.js的主题扩展中，用自定义类名引用，这样Tailwind能明确识别并编译这些样式：

1. 修改tailwind.config.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'scarcity-purple': 'linear-gradient(to right, rgba(229, 38, 252, 0.2), rgba(43, 79, 252, 0.2))',
        'scarcity-green': 'linear-gradient(to right, rgba(100, 255, 158, 0.2), rgba(43, 111, 133, 0.2))',
        'scarcity-yellow': 'linear-gradient(to right, rgba(255, 228, 183, 0.2), rgba(177, 180, 55, 0.2))',
      },
    },
  },
}

2. 更新COLORS对象为自定义类名：

const COLORS: Record<string, string> = {
  purple: "bg-scarcity-purple",
  green: "bg-scarcity-green",
  yellow: "bg-scarcity-yellow",
}

这种方式更符合Tailwind的最佳实践，也避免了动态类名的扫描问题。

方案3：使用内联样式（不推荐） #

如果不想修改配置，也可以直接用内联样式实现，但会失去Tailwind的缓存、按需编译等优势：

// 修改useAssetColor返回样式对象
const COLORS: Record<string, React.CSSProperties> = {
  purple: {
    background: 'linear-gradient(to right, rgba(229, 38, 252, 0.2), rgba(43, 79, 252, 0.2))'
  },
  green: {
    background: 'linear-gradient(to right, rgba(100, 255, 158, 0.2), rgba(43, 111, 133, 0.2))'
  },
  yellow: {
    background: 'linear-gradient(to right, rgba(255, 228, 183, 0.2), rgba(177, 180, 55, 0.2))'
  },
}

export const useAssetColor = (asset: AssetWithTradeData) => {
  // ...逻辑不变，返回样式对象
}

// 组件中使用style属性
export function AssetCard({ asset, children, className }: AssetCardProps) {
  const colorStyle = useAssetColor(asset)

  return (
    <div
      className={cn("relative", className)}
      style={colorStyle ?? { backgroundColor: 'var(--color-muted)' }}
    >
      {children}
    </div>
  )
}

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