Tailwind 的 @tailwind base 不可删除，它强制所有元素 box-sizing: border-box，是布局安全的底层前提；删后会导致第三方 UI 库组件宽度溢出、内边距错位。
Tailwind 的重置不是“可选功能”，而是布局安全的前提；你不能跳过它，但可以控制它在哪生效、怎么补、何时覆盖。
为什么不能删掉 @tailwind base？
它只干一件事：给所有元素强制 box-sizing: border-box。这不是视觉美化，是尺寸计算的底层契约。删了它，padding 和 border 就会从 width/height 外部加，第三方 UI 库（比如 Ant Design 的 Button 或 Headless UI 的 Dialog）立刻出现宽度溢出、内边距错位。
常见错误现象：
- 写了
max-w-96 p-4，但实际宽度远超 24rem - Vite HMR 热更新后样式突然错乱，DevTools 里发现
div的box-sizing是content-box -
@tailwind components里写的.card { @apply p-6 }在某些组件里 padding 不生效
必须确保它在 CSS 入口文件最顶部，顺序固定为：
立即学习“前端免费学习笔记（深入）”；
@tailwind base;<br>@tailwind components;<br>@tailwind utilities;
想恢复浏览器原生表单样式怎么办？
Tailwind 的 Preflight 默认把 button、input、select 的 background-color 设为 transparent，还清掉了 margin 和 padding。这不是 bug，是设计选择——为避免和 Utility 类冲突。但如果你用的是 Ant Design 或 Naive UI，它们依赖原生表单渲染逻辑，就得关掉整个 Preflight。
操作步骤：
- 在
tailwind.config.js中设corePlugins: { preflight: false } - 重启开发服务器（Vite/webpack 不会自动重注入
@tailwind base输出） - 手动补
@layer base，至少包含：*和*::before、*::after的box-sizing: border-box，以及button, input, select, textarea的background-color: initial和border: initial
别用 @apply 写这些基础重置——@layer base 阶段 @tailwind utilities 还没注入，sm:p-2 或 hover:bg-gray-100 全部无效。
如何局部覆盖 Preflight 而不破坏全局？
比如只想让某个 ul 恢复原生缩进，又不想关掉 Preflight。这时不能写 ul { list-style: revert; margin: revert; } ——revert 在旧版 Safari 不支持，且行为不可控。
推荐做法：
- 在
@layer base里用显式值覆盖，例如：ul.my-list { list-style: disc; padding-inline-start: 2rem; margin-block: 1em; } - 配合
class而非标签选择器，避免影响其他ul - 如果项目已引入
normalize.css，仍要保留@tailwind base——它不重复，但box-sizing规则必须存在
注意：@layer base 必须写在 @tailwind base 之后、@tailwind components 之前，否则会被 Tailwind 自己的基础规则覆盖。
要不要装 @tailwindcss/forms？
它不是重置，是增强。Preflight 只做最小化清理（比如清 background、设 border），而 @tailwindcss/forms 提供语义化表单类（form-input、form-select），并修复跨浏览器差异（如 Chrome 的 date 输入框、Safari 的 range 滑块对齐）。
适用场景：
- 项目中大量手写
<input>、<select>，且需要统一圆角、阴影、聚焦状态 - 用了
strategy: 'base'，插件会自动为所有表单元素加基础样式，无需改 HTML - 不用它时，自己补
@layer base也能实现类似效果，但得手动处理appearance、vertical-align等细节
它的 CSS 输出和 Preflight 共存，不冲突，但加载顺序要放在 @tailwind base 之后。
真正难的不是“怎么重置”，而是判断哪些该留、哪些该动、哪些该补——Preflight 是默认安全网，关它之前，先确认你是否真的需要原生按钮的蓝色背景和 2px 边框。
