直接覆盖 button { background-color: transparent } 行不通，因 tailwind preflight 是打包注入的 @layer base 规则，选择器权重统一且不可单独移除；可靠方案是禁用 preflight 并手动补 box-sizing、表单元素重置及列表样式。
为什么直接覆盖 button { background-color: transparent } 行不通
因为 Tailwind 的 preflight 是一整套打包注入的 @layer base 规则，不是独立可删的 CSS 文件。它把 button、input、ul 等几十个元素的样式（background-color、margin、padding、list-style）统一重置，且所有规则共享同一选择器权重（如 button, [type='button']）。你在自己的 CSS 里写 button { background-color: initial !important }，会和 twMerge 冲突，DevTools 里也难定位来源——样式面板里可能只显示“来自 data-tailwind="true"”，看不到具体是哪条规则在起效。
唯一可靠方式：关掉整个 preflight 并手动补关键基础样式
必须在 tailwind.config.js（或 .ts）中显式禁用：
module.exports = {
corePlugins: {
preflight: false,
},
content: ["./src/**/*.{js,ts,jsx,tsx}"],
}
改完后必须重启开发服务器（Vite/Webpack），HMR 不会重新生成 @tailwind base 部分。
关掉后，浏览器原生样式回归：img 恢复 inline 行内行为，button 有默认背景，ul 有缩进和项目符号。但你得立刻手动补三项底线规则，否则布局会崩：
-
*、*::before、*::after必须设box-sizing: border-box（现代布局前提，缺失会导致第三方库 padding/border 计算错乱） -
button、input、select、textarea要重置background-color: initial和border: initial（否则 UI 库按钮/输入框仍可能残留透明底或无边框） -
ul、ol建议用list-style: revert; margin: revert; padding: revert;（revert才能精准还原浏览器默认缩进和间距，initial会清成 0）
这些要写在 @layer base 块里，且必须放在 @tailwind base 之后、@tailwind components 之前。
只想恢复富文本区域样式？别全局关 preflight
如果只是 Quill/Tiptap/Markdown 渲染内容区的 h1、p、ul 样式丢失，全局关 preflight 会连带破坏导航栏、表单等 UI 库组件。更安全的做法是：
- 保留
preflight: true - 给富文本容器加类名（如
.prose），并在其内部用all: revert局部还原 - 但必须排除
img和code等元素，否则img会丢掉max-width: 100%导致溢出，code字体变小
示例：
@layer base {
.prose :is(h1, h2, h3, p, ul, ol, li, blockquote) {
all: revert;
}
.prose img {
max-width: 100%;
height: auto;
}
}
important: true 是临时止痛药，不是解药
important: true 会让所有 Tailwind 工具类自动加 !important，比如 text-red-500 编译成 color: #ef4444 !important。它确实能压过 preflight 的标签规则，但代价是：
- 调试时所有样式都带
!important，DevTools 里权重混乱，难以判断真实优先级 - 和第三方库自定义
!important规则打架（比如 Ant Design 的.ant-btn:focus） - 无法解决
img { display: block }导致的 html2canvas 截图偏移问题
它只该用于你既不能改加载顺序、又不能动 preflight 的极端场景（比如嵌入老系统 iframe）。日常开发中，关 preflight + 手动补 @layer base 更可控。
真正容易被忽略的是：关掉 preflight 后，@tailwind base 指令本身不能删——哪怕它现在输出空 CSS，也要保留在入口 CSS 文件顶部，否则 box-sizing: border-box 这类关键规则就彻底没了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
