唯一可靠路径是关闭整个 preflight 并手动补三项基础样式：box-sizing、表单控件重置、列表样式；局部覆盖或 !important 无效，因 preflight 规则统一注入且不参与 JIT 编译。
不能靠“局部禁用 preflight”或加 !important 让某个 button 或 input 恢复原生样式——Tailwind 的基础重置是整体注入的，没有开关粒度。唯一可靠路径是关掉整个 preflight，再手动补关键基础规则。
为什么直接覆盖 button { background-color: initial } 不行
因为 Tailwind 的 preflight 规则打包在 @tailwind base 里，统一设了 button, input, textarea { background-color: transparent; border: none; } 等一揽子重置。这些规则不依赖类名，也不走 JIT 编译流程，所以：
- 你在组件里写
class="button bg-transparent"或加!important，根本不会生成新 CSS，只是和已有的button { background-color: transparent }冲突 - DevTools 里看到的“未生效”，其实是 Tailwind 根本没为你这条覆盖规则生成任何 CSS
- 硬加
!important还会和twMerge行为打架，动态拼接类时顺序不可控
关掉 preflight 后必须手动补三项基础样式
关闭后浏览器恢复默认行为（button 又变丑了、img 回归 inline、ul 有缩进），但第三方 UI 库（Ant Design / Naive UI）才能正常渲染。补漏要精准，只加这三块：
-
@layer base中补* { box-sizing: border-box }—— 所有第三方库布局依赖它，漏了必错位 - 补表单控件重置：
button, input, select, textarea { background-color: initial; border: initial; } - 补列表样式：
ul, ol { list-style: initial; margin-block: 1em; }
注意：@layer base 必须写在 @tailwind base 之后、@tailwind components 之前；里面不能用 @apply sm:m-0 这类响应式变体，它们不会生效。
想让某几个元素彻底脱离 Tailwind 样式？用 all: revert
如果只是嵌入富文本、第三方编辑器或 iframe 内容，需要局部“清空”所有 Tailwind 影响，可用：
.reset-tailwind, .reset-tailwind * {
all: revert;
}
但要注意：
-
revert在 Safari 15.4+、Chrome 91+、Firefox 96+ 才完整支持；老版本降级为unset，部分样式可能残留 - 这不是长期方案，仅适合兜底场景；集成 UI 组件库时仍应走关
preflight+ 手动补基础的正路 - 别把它当“开关”滥用——一旦用了
all: revert，你连box-sizing都得自己再声明一遍
真正容易被忽略的是：样式不生效，90% 不是权重问题，而是 @layer 顺序错乱、preflight 干扰、或构建缓存导致工具类定义顺序异常——这些地方加再多 ! 都没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
