tailwind css比css-in-js更高效，但二者应按需组合：tailwind优先用于静态样式，twmerge解决动态类冲突，css-in-js用于真正动态场景，并统一设计系统变量实现明暗模式同步。
直接用 Tailwind CSS 写样式，比写 CSS-in-JS 更高效，但两者不是非此即彼——关键在于按需组合、避免冗余、控制冲突。
Tailwind 优先，按需增强
- 类名拼接别硬写：用
twMerge合并动态类，自动剔除冲突项（比如p-4 p-2→p-4，hover:bg-blue-500 hover:bg-red-500→hover:bg-red-500） - 不要手动拼字符串：
className={base + ' ' + variant}容易出错；改用twMerge(base, variant, extra) - 组件内样式逻辑抽成函数或配置对象，比如按钮的尺寸/主题映射表，而不是在 render 里重复写三元判断
CSS-in-JS 用在真正需要动态的地方
- 颜色、间距、动画参数等依赖 props 或 theme 的值，适合用 cxs、Compiled 或 Emotion 的 css 函数生成
- Compiled 推荐用于大型 React 项目：它把样式编译成静态 CSS，不占运行时开销，API 和 styled-components 几乎一致，零学习成本
- cxs 适合轻量场景：体积仅 0.7KB，支持主题、样式组合、媒体查询，写法简洁，
cxs({ color: theme.primary })即可
共用一套设计系统，别双轨维护
- 把 Tailwind 的
theme.extend.colors和 CSS-in-JS 的 theme 对象对齐，例如都从--primaryCSS 变量读取 - 在
tailwind.config.js里用hsl(var(--primary))，在 cxs 或 Compiled 中也读同一组 CSS 变量，明暗模式切换时两边自动同步 - 边框半径、字体大小、阴影等基础 token 统一定义在一处，再分别注入到 Tailwind 和 CSS-in-JS 工具中
构建和加载不拖慢开发体验
- Tailwind 开启
mode: 'jit'，只生成实际用到的类，打包体积可控 - 使用
content字段精准扫描路径（如"./src/**/*.{tsx,jsx,ts,js}"），避免误删或冗余 - 如果用了 Vue-Tailwind 或 Omi 这类封装组件库，配置
prefix: 'tw-'防止类名污染全局样式
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
