必须关闭corePlugins.preflight: false并重启服务器，因preflight用元素选择器直接重置button、img、h1等原生样式，导致UI库渲染异常；prefix和!important均无效，关后需手动补@layer base关键基础样式。
preflight 直接重置 button、img、h1 等原生标签样式
它不是加类名，而是用 button、img、h1 这类元素选择器，一上来就覆盖浏览器默认行为。比如 button { background-color: transparent; } 会让 Ant Design 的按钮变透明；img { display: block; } 会破坏 html2canvas 截图时的行内对齐；ul { list-style: none; padding: 0; } 会让 CMS 输出的 Markdown 列表直接塌陷。
关 preflight 不是“去掉重置”，而是跳过生成
很多人误以为删掉 @tailwind base 就行，其实那会连 box-sizing: border-box 这种关键规则也丢掉。正确做法是在 tailwind.config.ts 里写：
corePlugins: {
preflight: false
}
这会让 Tailwind 构建时彻底不编译那套重置 CSS，但保留 @tailwind base 中其他必要层（如 base 层的 box-sizing）。改完必须重启开发服务器——HMR 不会重新注入已加载的 CSS 规则。
为什么 prefix 或 important 都救不了 preflight 问题
prefix: 'tw-' 只影响工具类（如 tw-flex），对 button {} 这种无类选择器完全无效；important: true 能压第三方组件类（如 .ant-btn），但压不住浏览器渲染层被重置后的状态——按钮没背景色，不是权重不够，是它根本没继承任何默认样式了。
只恢复 ul/ol 这类局部元素该怎么做
如果不想全关 preflight，又需要语义化内容正常渲染，可在主 CSS 文件中用 @layer base 精准还原：
@layer base {
ul, ol {
list-style: revert;
margin: revert;
padding: revert;
}
}
revert 是关键：它把样式交还给浏览器 UA 样式表，而不是靠猜值写死 padding-left: 40px。但注意，这种写法只对列表生效，button 或 input 的问题仍得靠关 preflight 来解。
真正卡住的点永远是 preflight —— 它在你没注意的时候，已经悄悄改写了 HTML 元素最底层的渲染契约。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
