该技能面向使用 Tailwind CSS 4 进行样式开发的场景，整理了模式与最佳实践，触发场景是使用 Tailwind 进行样式编写时，涉及 cn()、主题变量以及 className 中不使用 var() 等要点。
用途 用于在编写 Tailwind 样式时提供一套统一的决策与规范，减少样式写法上的随意性，尤其是条件类名、动态值以及主题颜色的处理方式。
主要能力 提供样式决策树：Tailwind 类存在时使用 className；动态值使用 style 属性；条件样式使用 cn()；仅静态样式时直接使用 className，无需 cn()；库不支持 className 时使用带 var() 常量的 style 属性。 给出关键规则：不在 className 中使用 var()，应使用 Tailwind 语义化类；不在 className 中使用十六进制颜色，应使用 Tailwind 颜色类。 说明 cn() 工具函数的实现：由 clsx 与 tailwind-merge 组合，返回 twMerge(clsx(inputs))。 说明 cn() 的使用时机：条件类名、可能与传入 className 冲突的合并、多个条件组合；静态类名不应使用 cn()。 说明图表或库不支持 className 时的处理：定义包含 var() 的样式常量对象（如 primary、secondary、text、gridLine 对应 var(--color-primary) 等），通过库组件的属性传入。 说明动态值处理：style prop 用于真正动态的值（如宽度百分比、透明度），CSS 自定义属性可用于主题化。 汇总常见模式：Flexbox、Grid、间距（padding/margin）、排版、边框与阴影、状态（hover/focus/active/group-hover）、响应式、深色模式。 说明任意值（arbitrary values）作为一次性值的补充用法，以及不应用于颜色。
使用方式 按决策树选择写法；条件或冲突合并时引入 cn()（依赖 clsx 与 tailwind-merge）；库不支持 className 时使用 var() 常量对象；动态值使用 style prop 或 CSS 自定义属性。
适用场景 使用 Tailwind CSS 4 编写组件样式的项目；需要处理条件类名合并、主题色、响应式与深色模式；结合 Recharts 等仅接受样式属性的图表或组件库进行样式配置。
限制 资料未说明该技能支持的 Tailwind 具体版本范围、安装步骤、运行环境、相关命令、收费或价格信息；也未说明其对构建工具或框架的依赖。相关事实暂未提供。