顺序问题需先用DevTools验证：若被删样式来自自写CSS且其在第三方库之前，才是顺序问题；否则多为特异性不足。正确顺序应为reset→variables→components→page/theme，Tailwind的@tailwind base须置顶。
确认是不是真因顺序导致覆盖
别一上来就调顺序，先用 DevTools 验证：选中元素 → 右侧 Styles 面板里找带删除线的样式 → 点击旁的文件名跳转到 <link> 标签位置。如果被划掉的规则来自你写的 CSS，而它的 <link> 出现在第三方库（如 bootstrap.min.css 或 element-plus.css）之前，那才是顺序问题。否则大概率是特异性没赢——比如你写 .btn，对方写 #app .btn，哪怕你放最后也盖不过去。
调整 link 标签顺序必须满足分层逻辑
不是“越往后越强”，而是按支撑层级排：reset.css 必须最前，variables.css（含 var(--color)）必须在所有用它的文件之前，components.css 放中间，page.css 或主题文件放最后。Tailwind 的 @tailwind base 本质就是 preflight，也得放在所有业务样式之前；否则它后置会把你设好的 button { margin: 0 } 又打回默认值。
常见错误包括：
- 在
page.css里用@import "base.css"—— 这会让base.css实际加载晚于page.css，彻底颠倒顺序 - JS 动态创建
linkEl并appendChild到document.head—— 它永远插在所有静态<link>后面，天然晚 - 把
<link>写在里 —— 渲染可能已开始，导致 FOUC 或样式闪烁
构建工具会偷偷改顺序，得看最终 HTML
Vite 默认把插件注入的 CSS <link> 插在 末尾；Webpack 用 MiniCssExtractPlugin 时，CSS 文件顺序由 JS 入口里的 import './a.css' 语句决定，跟源码里写的 <link> 顺序无关。所以务必打开生产环境生成的 HTML（不是你写的 index.html），检查最终 <link rel="stylesheet"> 的排列是否符合预期。
立即学习“前端免费学习笔记（深入）”；
若发现错乱，可：
- Vite 中禁用自动 CSS 注入，改用
build.rollupOptions.output.manualChunks显式控制 chunk 顺序 - Webpack 中用
optimization.splitChunks给 CSS chunk 命名，并通过entry依赖顺序约束加载 - 避免在组件或页面级
useEffect里动态 import CSS —— 加载时机不可控
Tailwind 任意值类（如 w-[80px]）被基础类（如 w-full）覆盖
这是特异性相同 + 定义顺序导致的典型问题。.w-full 和 .w-\[80px\] 都是单类选择器（特异性均为 0,0,1,0），谁在 Tailwind 的 CSS 输出里定义得靠后，谁就生效。默认配置下，基础工具类往往排在任意值类前面，结果 w-full 覆盖了 w-[80px]。
解决方式很直接：
- 在 HTML 中把
w-[80px]写在w-full右边：<div class="w-full w-[80px]"> —— 浏览器解析 class 属性是从左到右，但最终以 CSS 规则在样式表中的定义顺序为准；不过多数构建流程下，这个写法能“碰巧”生效 <li>升级 Tailwind v3.4+，启用 <code>content配置的relative: true模式，让任意值类生成更靠后的 CSS 规则 - 手动在
tailwind.config.js的theme.extend.container等位置插入自定义宽度，绕过任意值语法
真正难的不是知道该调顺序，而是确保这个顺序在开发、构建、部署各环节都稳定——尤其当多个构建插件同时操作 时，一个没注意，variables.css 就被插到了 components.css 后面。
