推荐用数组 join 拼接类名，安全易读且自动过滤空值；简单场景可用模板字符串但需 fallback，如 text-${color || 'gray'}-600。
用字符串模板或数组 join 拼接类名最直接
React里不能直接在 className 中写表达式（比如 className="text-{color}"），必须拼成完整字符串。最常用的是模板字符串和数组 join，两者都够快、够直观，也兼容 SSR 和服务端渲染。
常见错误是把对象解构或条件逻辑硬塞进字符串里，结果拼出 "text-undefined" 或空格不一致。要避免在模板里直接调用未校验的变量。
- 推荐用数组收集类名再
join(' ')：安全、易读、空值自动过滤 - 简单场景用模板字符串也行，但记得对变量做 fallback，比如
`text-${color || 'gray'}-600` - 别用
className={clsx(...)}之类第三方库——除非项目已统一引入，否则纯 JS 就够用
条件类名用三元或逻辑运算符最轻量
需要根据布尔值开关某个类时，&& 和三元是最小开销方案，React 不会因此多触发重渲染，也不依赖额外依赖。
典型坑是误用 || 导致意外覆盖：比如 className={`p-2 ${isActive || 'bg-blue-500'}`}，当 isActive 是 false 时，结果是 'p-2 bg-blue-500'，但你本意可能是“只在 active 时加背景”。
立即学习“前端免费学习笔记（深入）”；
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
- 开关单个类：用
{isActive && 'bg-blue-500'}—— 短路逻辑天然安全 - 二选一：用
{isActive ? 'bg-blue-500' : 'bg-gray-200'} - 多个条件组合？优先拆成数组，比如
[base, isActive && 'font-bold', isDisabled && 'opacity-50'].filter(Boolean).join(' ')
动态颜色/尺寸值要提前约束取值范围
Tailwind 的 color、spacing、radius 等工具类是静态生成的，text-${dynamicColor}-500 中的 dynamicColor 必须是预设值（如 'red'、'blue'），否则样式不会生效，且开发时无报错提示。
线上跑着看似正常，但一旦传入 'teal' 而 Tailwind 配置没开 teal，对应样式就丢失——这种 bug 很难调试。
- 定义白名单数组或
const COLORS = ['red', 'blue', 'green'] as const，运行时校验 - 服务端渲染时若值来自 props 或 URL 参数，务必做
includes判断，非法值 fallback 到默认色 - 不要试图用
safeColor = color.replace(/[^a-z]/g, '')这类模糊清洗——Tailwind 类名不是正则能兜住的
组件封装时避免在 className prop 上叠加拼接
自定义组件接收 className 并想追加内部样式时，常见写法是 className={`${baseClasses} ${props.className}`}，但这样容易导致空格混乱、重复类名、甚至覆盖用户传入的关键样式（比如用户传了 !text-red-500，却被你前面的 text-gray-700 无意覆盖）。
更稳的方式是把用户传入的 className 当作“最高优先级补丁”，插在末尾，并确保基础类名不冲突。
- 基础类名尽量用不可覆盖的组合，比如
flex items-center gap-2和用户传的text-xl font-bold天然正交 - 真有覆盖风险时（如都设
text-），应在文档里明确约定：用户传入的className会覆盖组件内同类型工具类 - 别在封装组件里再做复杂拼接逻辑——那应该抽成独立 hook 或工具函数，保持组件职责单一
动态类名本身不难，难的是边界控制：变量来源是否可信、Tailwind 是否真生成了对应类、SSR 和 CSR 是否行为一致。每次拼接前，花两秒想想“这个字符串最终会不会变成一个真实存在的 class”。
