tailwind 不支持运行时拼接类名，必须在构建阶段通过 content 扫描或 css 变量暴露动态类名；react 推荐用 clsx 或对象语法处理条件样式，vue 优先用 :class 对象语法，避免内联函数和 dom 直接操作。
不能靠运行时拼接类名字符串来实现条件样式，Tailwind 在构建阶段就决定了哪些类会生成 CSS 规则；你写的 bg-${color}-500 或 text-[${value}] 根本不会被扫描到，最终样式不生效。
React 中 className 里别写三元嵌套字符串
直接写 className={isActive ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-700'} 看似快，但类名一多就难维护，还容易漏空格或拼错布尔逻辑。更糟的是，如果某个分支里返回 false，React 会把 false 渲染成字符串 "false"，导致 class 属性变成 class="false"，浏览器真会去匹配这个类名。
- 用
clsx自动过滤假值：clsx('py-2 px-4', { 'bg-blue-500': isActive, 'bg-gray-200': !isActive }) - 多个互斥状态（比如
hidden和block）建议用tailwind-merge，它能自动剔除冲突项，保留最后一个有效类 - 避免在
className里调用函数，比如{getButtonClass()}—— 每次渲染都执行，可能触发副作用或重复计算
Vue 中优先用 :class 对象语法
数组写法如 :class="['px-4', isActive ? 'bg-blue-500' : 'bg-gray-100'] 有个隐患：数组里一旦有 null 或 undefined，整个 class 值会变成字符串 "px-4,null"，浏览器解析失败。
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
- 对象语法天然过滤假值：
:class="{ 'px-4 py-2': true, 'bg-blue-500': isActive, 'rounded-lg': hasRadius }" - 键是完整类名，值是布尔表达式；
false、null、undefined全部被忽略 - 别在对象里写内联函数，例如
{ 'text-red-500': checkStatus(item) }—— 模板里应只放简单判断，复杂逻辑提成计算属性
动态颜色或尺寸必须走 content 扫描或 CSS 变量
如果你从 API 拿到一个颜色名 primary，然后想拼出 bg-primary-500，Tailwind 构建时根本不知道这个字符串存在，CSS 里压根没这条规则，页面就白屏。
- 确保
tailwind.config.js的content字段覆盖所有可能生成类名的文件，比如src/**/*.{js,jsx,ts,tsx,vue} - 若必须用变量控制颜色，改用 CSS 变量 + 任意值语法：
bg-[var(--bg-primary)]或text-[color:var(--text-primary)]，前提是变量已在:root中定义且 Tailwind v3.0+ - 任意值语法只认字符串字面量，
class="bg-[var(--bg-${theme})]"这种写法无效 —— JIT 编译器看不到变量内容
千万别在 useEffect 或原生 DOM 操作里切类名
有人习惯用 ref.current.classList.add('bg-red-500') 动态加类，这绕过了 React 的更新机制，服务端渲染首屏会错乱，CSS 过渡动画也不触发，而且和 SSR 不兼容。
- Tailwind 类名本质是静态 CSS 规则，应该由 state 驱动 JSX 重新渲染来切换
- 如果真要操作 DOM 类（比如第三方库集成），记得同时更新对应 state，保持视图与数据同步
- 不要混用
style和class控制同一属性，比如同时设class="bg-blue-500"和style="background-color: red"，优先级容易失控
真正麻烦的不是怎么写条件，而是让 Tailwind “看见”那些动态出现的类名 —— 它不运行时解析，只构建时扫描。所以任何运行时拼接，都得提前暴露给扫描器，或者换条路走 CSS 变量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
