TailwindCSS如何通过反引号拼接props传递颜色类名

你当前的代码存在两类问题，会直接导致样式失效：

• 语法错误：模板字符串的插值块${}里只能放合法的JS表达式，你写的bg={col}是JSX属性语法，放在插值里属于非法写法，会直接引发渲染异常
• 机制适配问题：就算语法写对了，如果Tailwind在构建阶段扫描不到完整的类名字符串，对应样式会被Tree Shaking剔除，最终页面无样式效果

正确写法 #

场景1：直接传入完整类名 #

如果你打算从父组件直接传入类似text-blue-500、bg-red-600的完整Tailwind类名，直接把存储类名的prop插入模板字符串即可，不要加多余的属性语法：
父组件传参示例：

<Icon col="bg-blue-500" />

Icon组件接收参数后拼接className：

function Icon({ col, className }) {
  // 直接把col变量插入模板字符串即可
  return <svg className={`h-14 ${col} ${className ?? ''}`}>{/* 图标内容 */}</svg>
}

注意：这种写法要求传入的必须是和Tailwind官方类名完全一致的完整字符串，禁止写bg-${color}-500这类拆分片段再拼接的写法——Tailwind是在构建时静态扫描源码里的完整类名字符串生成样式，片段拼接的类名不会被识别，最终不会生成对应CSS。

场景2：需要动态组合类名片段 #

如果你需要根据传入的属性值动态切换类名，不要在className位置临时拼接字符串，提前定义好所有可能用到的完整类名映射表，保证Tailwind能扫描到所有类名：

// 提前枚举所有可能用到的颜色类，写完整类名
const bgColorMap = {
  blue: 'bg-blue-500',
  red: 'bg-red-500',
  green: 'bg-green-500',
  gray: 'bg-gray-500'
}

function Icon({ color = 'blue', className }) {
  const bgClass = bgColorMap[color]
  return <svg className={`h-14 ${bgClass} ${className ?? ''}`}>{/* 图标内容 */}</svg>
}

// 父组件使用
<Icon color="red" />

如果动态类名的范围很大，也可以在tailwind.config.js里配置safelist强制保留对应规则，但优先推荐映射表写法，可维护性更高，不容易出现配置遗漏。

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