直接拼接字符串类名危险，因用户输入可能导致非法类名、绕过安全检查且无法被tailwind扫描；clsx适合条件组合但不处理同前缀覆盖，tailwind-merge才用于自动剔除被覆盖的类名。
React中直接拼接字符串类名为什么危险
在React里写 className={"bg-" + color + " text-" + textColor} 看似简单，但会引入运行时注入风险：如果 color 来自用户输入或未校验的 props，可能生成非法类名（比如 bg-;alert(1)），虽然Tailwind本身不执行JS，但这类字符串拼接容易绕过构建时的安全检查，也导致无法做静态分析、tree-shaking 或 IDE 类名提示。
更实际的问题是——开发时没报错，上线后发现某些组合类名没被生成，因为 Tailwind 默认只扫描模板字面量和 class 属性值，不扫描动态拼接的字符串。
所以必须用工具把动态类名“显式声明”出来，让 Tailwind 构建流程能识别并保留它们。
clsx 适合纯条件组合，但不处理冲突
clsx 是轻量级工具，核心价值是把对象、数组、布尔值转成空格分隔的类名字符串，它不做语义理解，也不合并或覆盖同类前缀。
常见用法：
- 用对象键值对控制开关：
clsx({ "bg-blue-500": isPrimary, "bg-gray-200": !isPrimary }) - 混用数组和对象：
clsx("text-sm", { "font-bold": isActive }, disabled && "opacity-50") - 注意：如果写了
{"bg-red-500": true, "bg-blue-500": true}，最终会是"bg-red-500 bg-blue-500"—— 浏览器以后者为准，但你无法在代码里看出覆盖逻辑，维护时容易误判
它不解决「同一前缀多个值同时存在」的优先级问题，适合样式互斥不强、或你明确知道层叠顺序的场景。
tailwind-merge 必须用于有覆盖关系的动态类名
当你需要根据状态切换同一类族（如 text-、bg-、flex-）的不同值时，tailwind-merge 才是正确选择。它会在运行时解析类名，自动剔除被新值覆盖的旧值。
Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。
例如：
import { twMerge } from "tailwind-merge";
twMerge("text-red-500", "text-blue-700"); // → "text-blue-700"
twMerge("flex-row", "flex-col", "flex-wrap"); // → "flex-col flex-wrap"
twMerge("p-4", "px-6", "py-2"); // → "px-6 py-2"（p-4 被精确拆解后覆盖）
关键点：
- 必须搭配
clsx或手动组合后再传入twMerge，它不替代类名聚合逻辑 - 支持自定义配置，比如扩展识别
motion-safe:或group-hover:等变体 - 对性能无明显影响（已做 memo 缓存），但不要在 render 中做复杂计算再传给它
生产环境必须配好 Tailwind 的 content 配置
无论用 clsx 还是 tailwind-merge，如果 tailwind.config.js 的 content 没包含你的 JSX 文件路径，那些动态生成的类名在生产构建时就会被 PurgeCSS 删掉，导致样式丢失。
确认写法：
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}", // 必须覆盖所有用到动态类名的文件
],
// ...
};
常见漏配点：
- 把
./src/components/**/*.{js,jsx}写死，但 hooks 或 utils 里也调用了twMerge - 用了 Vite / Next.js 等框架，没加
.tsx扩展名，导致 TSX 组件里的类名未被扫描 - 在
styled-components或Emotion的 css 字符串里写了 Tailwind 类名 —— 它们不会被识别，得改用@apply或提取为独立 className
最稳妥的做法是跑一次 npm run build 后检查 dist 输出的 CSS 文件大小，再对比 dev 模式下浏览器渲染效果；若有样式缺失，八成是 content 配置漏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
