类名顺序不影响渲染优先级，真正起效的是构建后CSS中规则的声明顺序；因Tailwind工具类特异性相同，后声明者覆盖先声明者，故需用twMerge('p-2 p-4')确保仅保留p-4，且prettier-plugin-tailwindcss必须置于plugins末位以正确排序复合变体。
类名顺序本身不决定渲染优先级，但影响构建后CSS声明顺序
HTML中class="p-4 p-2"的书写顺序，对最终样式生效没有直接作用。真正起效的是Tailwind在构建时生成的CSS文件里.p-4和.p-2这两个规则的**出现顺序**——因为它们特异性完全相同（都是单类选择器），谁在CSS源码里写在后面，谁就覆盖前面的同属性声明。
常见误判场景：
- 你在Vue模板里写
:class="['p-2', isBig ? 'p-4' : '']"，但Vite HMR缓存没清，导致构建产物中.p-2仍排在.p-4之后 →p-2意外生效 -
md:p-4 p-2看起来“响应式类在前”，但Tailwind输出时.p-2可能被排到.md\:p-4下面 → 移动端反而用不上p-4 - 使用
twMerge('p-2 p-4')能保证只留p-4，但若传入twMerge(['p-2', 'p-4'])，它原样返回数组，后续拼成class="p-2 p-4"又回到不可控状态
为什么prettier-plugin-tailwindcss必须最后加载
这个插件不是简单按字母排序，而是复用Tailwind官方sortClasses逻辑，能正确处理peer-checked:scale-100、dark:bg-slate-800这类复合变体，并把响应式前缀（如md:）和对应基础类绑在一起。但如果Prettier其他插件（比如prettier-plugin-organize-imports）先格式化了HTML或JSX，把class属性重排过一次，再轮到Tailwind插件时，类名已经错位，它无法还原原始语义意图。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 确保
prettier-plugin-tailwindcss在prettier.config.js的plugins数组中排在**最后一位** - Vue/JSX中动态拼接的类名（如
v-bind:class="base + ' ' + modifiers"）不会被插件识别，必须改用静态写法或封装为computed属性 - TS项目需加类型提示：/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
真正危险的不是顺序错乱，而是你不知道它什么时候错乱
类名顺序问题往往只在特定条件下暴露：Vite冷启动正常，HMR热更新后失效；CI构建产物和本地开发不一致；PurgeCSS扫描路径漏掉某个组件，导致md:p-4被删而p-4留下……这些都不是语法错误，DevTools里看不到报错，Computed面板显示的值也“看起来对”，但视觉就是不对。
最容易被忽略的一点：@layer的书写顺序必须严格匹配@tailwind指令位置。如果@layer components写在@tailwind utilities之后，所有自定义组件类都会被工具类覆盖——这时你调换HTML里class顺序毫无意义，因为底层CSS块顺序已定。
