@tailwind base（preflight）直接重置html标签样式，不依赖类名，故prefix无效；必须置于css最顶部以确保box-sizing生效；解法分三种：局部覆盖@layer base、关闭preflight或选择性重写。
为什么Tailwind的@tailwind base会直接改掉按钮、SVG、输入框样式
根本不是类名冲突，而是@tailwind base（即 preflight）直接对 HTML 标签写 CSS 规则，比如：button, [type='button'] { background-color: transparent; }、svg { display: block; vertical-align: middle; }。这些规则不依赖任何 class，浏览器一加载就生效，天然比.el-button、.n-input这类类选择器“早一步执行”。你改 class 名、调顺序、加 prefix 都拦不住它。
@tailwind base必须放在 CSS 最顶部，否则 box-sizing 会失效
它输出的是* { box-sizing: border-box }这种极低优先级的通用规则。如果写在@tailwind components后面，而你又写了div { box-sizing: content-box }，就会被覆盖——结果 padding 算错、宽度溢出、第三方组件边框撑破容器。PostCSS 不报错，bug 要到布局错位时才暴露。
- 错误顺序：
@tailwind components; @tailwind base; - 正确顺序：
@tailwind base; @tailwind components; @tailwind utilities; - 跳过
@tailwind base？可以，但得手动给每个新组件加box-border，没人这么干
SVG 下移、按钮变透明、输入框边框消失，该关 preflight 还是重写@layer base
三种场景对应三种解法，不能混用：
- 只想修 SVG 对齐？在
@layer base里覆盖：@layer base { svg { display: inline; vertical-align: baseline; } } - 整个 UI 库（如 Element Plus）样式崩了？关 preflight：
corePlugins: { preflight: false }，让浏览器默认样式保留，UI 库才有基础可依 - 既要保留部分 preflight（比如
box-sizing），又要放行 button 样式？局部重写：@layer base { button:not([class*="el-"]):not([class*="naive-"]) { background-color: initial; } }
开了prefix: 'tw-'还是按钮变透明，为什么
prefix只改类名生成，比如flex→tw-flex，但它对button { background: transparent }这条 preflight 规则完全无效——那条 CSS 没用到任何类名。
- 错误认知：以为加了
tw-前缀就能躲开所有冲突 - 真实作用域：仅防类名撞车（比如你和 Naive UI 都用了
.flex） - HTML 必须同步改：
class="tw-flex tw-p-2"，漏一个前缀，样式链就断 - 第三方插件（如
tailwindcss-animate）默认不识别 prefix，需单独确认兼容性
preflight 的影响藏在最底层，它不声不响地改掉标签行为，最容易被当成“UI 库 bug”去排查。真要动手，先打开 DevTools，找带data-tailwind="true"的 button 规则，确认是不是 preflight 在起效——再决定是关、绕，还是精准覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
