html中class属性的书写顺序本身不影响css样式优先级，真正起作用的是css规则在样式表中的声明顺序、选择器特异性和!important声明。
HTML中class属性的书写顺序本身不影响优先级
直接说结论：class="text-red-500 text-blue-400" 里，text-blue-400 不会因为写在后面就“自动覆盖” text-red-500。浏览器层叠规则只看 CSS 规则的声明顺序（即最终生成的 CSS 文件里哪条 .text-red-500 规则出现在后面），而不是 HTML 中 class 字符串的排列顺序。
你偶尔看到“调换 class 顺序生效了”，大概率是以下情况之一：
- 碰巧触发了构建缓存失效，重新生成了 CSS，导致工具类在输出文件中的物理顺序变了
- 混用了自定义样式或
!important类，干扰了原本的层叠逻辑 - 用了任意值类（如
w-[80px]）和预设类（如w-full）冲突，而二者特异性相同，谁在 CSS 文件里靠后谁赢——但这个“靠后”由 Tailwind 内部生成顺序决定，不是你手写 HTML 的顺序
Tailwind 工具类之间真有顺序依赖，但发生在 CSS 构建阶段
Tailwind 的 CSS 输出是按 @layer 和内部权重预排序的：所有 flex、grid 等布局类排最前，接着是尺寸/间距（w-full、mx-auto），再是视觉类（bg-gray-100、rounded），最后才是状态变体（hover:...）。这个顺序是固定的，不随你在 HTML 里怎么写 class 而改变。
但问题在于：当多个同类工具类同时存在时，比如 rounded-md 和 rounded-full，它们最终编译出的 CSS 规则都属于 @layer utilities，且选择器权重完全一样（都是 .rounded-md → 0,1,0）。此时真正起作用的是它们在 utilities.css 中的**物理位置**——Tailwind 按配置项顺序生成，rounded-full 默认排在 rounded-md 后面，所以它赢。
可一旦你用 PurgCSS 或某些插件删减了未用类，或者构建流程中 @tailwind utilities 被意外挪动位置，这个顺序就不可控了。
真正该关注的顺序：CSS 文件加载顺序与 @layer 层级
影响样式的不是 HTML 里的 class 顺序，而是三件事的叠加：
-
@tailwind base必须在最前（重置样式） -
@layer components必须出现在@tailwind components之前（否则你的组件样式会被覆盖） - 外部 CSS（如 Bootstrap、自定义
.btn）如果放在 Tailwind 输出之后，就会靠后声明、从而覆盖同权重的 Tailwind 类
比如你写了 class="text-red-500 btn"，而 .btn { color: blue; } 在 Tailwind CSS 文件之后引入，那蓝色一定生效——跟 class 写在前面还是后面毫无关系。
什么时候 class 顺序“看起来”起作用？
只有两种真实场景下，HTML 中 class 的书写顺序会间接影响结果：
- 使用
!强制语法时：class="p-4 p-6!"和class="p-6! p-4"效果不同，因为p-6!编译为.p-6\! { padding: 1.5rem !important; }，而p-4没有!，自然被压；但这是!的作用，不是 class 顺序本身 - 使用
[&]:变体提升特异性时：class="w-full [&]:w-[80px]"有效，class="[&]:w-[80px] w-full"也有效——因为[&]:w-[80px]生成的选择器是.w-full[&]:w-[80px]，权重升到0,2,0，已经脱离了“谁后声明谁赢”的竞争，进入特异性压制阶段
容易被忽略的是：任意值类（w-[80px]）和预设类（w-full）冲突时，靠调整 HTML class 顺序根本解决不了——必须用 [&]:w-[80px] 或 w-[80px]! 显式干预，否则构建不确定性会让问题在 CI/CD 中突然复现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
