Tailwind 原子类重构需遵循组合逻辑、响应式断点规范、class 顺序覆盖规则、语义化命名及配置精简原则，避免照搬 Bootstrap 思维与硬编码样式。
直接替换 class 会炸，先理清 Tailwind 的原子类逻辑
不是把 class="btn-primary" 换成 class="bg-blue-500 text-white py-2 px-4 rounded" 就算重写成功。Tailwind 不是 CSS 类名映射表，它靠组合生成样式，同一视觉效果可能有多种写法，但语义和响应行为完全不同。
常见错误现象：md:hidden lg:block 写反成 lg:hidden md:block，结果桌面端反而看不见；或者用 text-sm 调字体却忘了 leading-tight，行高塌陷。
- 响应式断点必须按 Tailwind 配置走（默认
sm/md/lg/xl/2xl），不能照搬 Bootstrap 的hidden-xs思维 - 间距单位统一用
space-x-/space-y-控制子元素间隙，别再用mt-2 mr-4手动调每个子项 - 颜色值优先用语义化命名（
bg-primary）而非具体色号（bg-blue-600），否则换主题时全得重扫
HTML 结构没变，但 class 堆叠顺序决定渲染结果
Tailwind 的 class 是按顺序应用的，后面覆盖前面。比如 text-red-400 text-blue-500 最终是蓝色，但 text-blue-500 text-red-400 就是红色——这和传统 CSS 的选择器权重无关，纯看 HTML 里 class 出现位置。
使用场景：重构表单时，常把状态类（invalid:border-red-500）和基础类（border border-gray-300）混写，结果校验失败时边框不红，因为 border 在后面又刷回了灰色。
立即学习“前端免费学习笔记（深入）”；
- 把状态类（
hover:、focus:、disabled:）放在最后，确保能生效 - 避免重复定义同类型属性，比如同时写
flex flex-col和flex-row，后者必然胜出，但容易漏查 - 用
@apply提取高频组合时，注意它本质是生成新 class，不会继承父级作用域，@apply hover:text-red-500在组件内可能失效
自定义配置没动，就别硬塞 Bootstrap 风格间距和字体
Tailwind 默认间距尺（spacing: { '1': '0.25rem', '2': '0.5rem', ... }）和字体大小（text-base = 1rem）跟 Bootstrap 差很多。直接照抄旧尺寸，会导致按钮太挤、卡片留白过少、文字阅读吃力。
性能影响：如果为迁就旧设计，在 tailwind.config.js 里疯狂加 extend.spacing 或 extend.fontSize，编译后 CSS 体积会明显上涨，尤其加了非标准值如 '7': '1.75rem' 后，所有变体（mt-7、p-7、gap-7）都会被打包进去。
- 先跑一遍
npx tailwindcss -o ./dist/tailwind.css --minify，用浏览器 DevTools 查哪些 class 真被用了，再决定是否保留对应配置 - 字体层级建议用
text-sm/text-base/text-lg/text-xl四档收口，别引入text-14px这种像素级控制 - 间距优先用系统级缩放（
scale-95）、内边距（p-4）或 margin（mb-6），少用top-2这类绝对定位偏移，维护成本高
第三方组件库（如 Headless UI、DaisyUI）的 class 别乱动
这些库的 class 是按 Tailwind 原子规则写的，但内部有隐含依赖。比如 DaisyUI 的 btn btn-primary 实际展开是几十个原子类的组合，手动删掉其中某个 shadow 或 transition，可能导致悬停动画卡顿、焦点环丢失。
容易踩的坑：看到 data-[state=open]:block 这种属性选择器，以为可以替换成 group-data-[open]:block，结果下拉菜单打不开——因为组件底层用的是 data- 属性驱动，不是 group 关系。
- 改之前先看文档是否提供
className或classprop 入口，优先走配置，不碰底层 class 字符串拼接 - 用
@layer components自定义组件样式时，确保 selector 匹配到真实 DOM 节点，别在div上写.btn却期望它作用于button - 升级 Tailwind 版本后，某些变体（如
has-[:checked]:bg-blue-500）可能失效，需检查content配置是否包含对应 JS 文件路径
最麻烦的从来不是 class 写多少，而是旧 HTML 里那些靠 !important、内联 style、JS 直接操作 element.style 塞进来的样式，它们会无视 Tailwind 的原子流。重构前得先 grep 出所有 style= 和 !important，一个个砍干净。
