@tailwind base 必须置于 CSS 文件最顶部，因其输出最低优先级的通配样式（如 * { box-sizing: border-box }），位置靠后会被覆盖，导致 padding/border 计算异常、UI 错位；删掉它将破坏布局安全根基。
不能跳过 @tailwind base，它不是“美化开关”，而是布局安全的硬性前提；删掉它，padding 和 border 会从元素宽高外部计算，第三方 UI 库立刻错位。
为什么 @tailwind base 必须放在 CSS 文件最顶部
它输出的是最低优先级的通配选择器（如 * { box-sizing: border-box }），位置靠后就会被后续更具体的选择器覆盖。比如你写了 div { box-sizing: content-box } 又把 @tailwind base 放在下面，那所有 div 就真的变成 content-box 了——p-4 的 padding 会撑出容器，max-w-96 实际宽度远超 24rem。
常见错误写法：
-
@tailwind components; @tailwind base;← 顺序反了，base 失效 - 在组件级 CSS 文件里单独写
@tailwind base← 构建时可能被抽离或重复注入 - 用
@import 'tailwindcss/base.css'替代@tailwind base← 路径不对或文件为空，导入无声失败
想恢复原生表单样式？别只覆盖 background-color
Tailwind 的 Preflight 是整体注入的重置层，button、input、select 的 background-color: transparent、margin: 0、padding: 0 全打包在 @tailwind base 输出里，没有独立开关。用 !important 单独覆盖，不仅和 twMerge 冲突，DevTools 里还难定位来源。
立即学习“前端免费学习笔记（深入）”；
可靠做法是关掉整个 Preflight 并手动补关键样式：
- 在
tailwind.config.js中设corePlugins: { preflight: false } - 重启开发服务器（Vite/webpack 不会热更新 base 层）
- 在
@layer base中补三项核心：*和*::before/*::after的box-sizing: border-box；button、input、select、textarea的background-color: initial和border: initial；ul、ol的list-style: initial和基础margin
list-none 为什么清不干净列表默认间距
list-none 只移除项目符号（list-style: none），但浏览器对 ul、ol 默认加的 margin-block-start 和 margin-block-end 完全不受影响。加了 list-none 后列表项还是往下掉一截、左右留白，就是这个原因。
必须显式清除外边距：
- 用
my-0清垂直 margin，mx-0清水平 margin - 若父容器是 flex/grid，残留 margin 会破坏对齐，建议统一加
m-0 -
list-none不继承、不递归，嵌套ul需每层都加 - SSR 场景（如 Next.js）下，若
list-none没进 PurgeCSS 的safelist，首屏会闪出原生样式
真正容易被忽略的是：即使你引入了 normalize.css 或 reset.css，@tailwind base 仍不可删——它唯一干的事（box-sizing: border-box）是其他任何重置都无法替代的底层契约。
