关掉 preflight 是必须的第一步，因为 tailwind 的 @tailwind base 会重置 img、button、h1 等原生标签样式，破坏 element plus 等旧 css 对默认行为的依赖；关闭 coreplugins.preflight: false 可让构建跳过生成该重置规则，而非删除 @tailwind base 引用，且改后必须重启开发服务器。
为什么关掉 preflight 是必须的第一步
旧版 CSS（比如 Element Plus、RuoYi 或手写 reset）依赖原生标签默认行为，而 Tailwind 的 @tailwind base 会重置 img、button、h1 等样式——比如把 img 设为 display: block，直接导致 html2canvas 截图错位、Ant Design 按钮背景消失。
关掉 corePlugins.preflight: false 不是“可选优化”，是让 Tailwind 跳过生成这部分 CSS；不是删 @tailwind base 引用，而是构建时彻底不编译它。
改完配置后必须重启开发服务器，否则 HMR 不会重建 CSS，旧规则还在。
prefix: 'tw-' 不是加个字符串就完事
开启 prefix: 'tw-' 后，text-red-500 变成 tw-text-red-500，但 Tailwind 不会自动扫描并替换你模板里的类名。
漏改一处，样式就“消失”：JSX 中 className={`flex ${isOpen ? 'hidden' : ''}` 必须改成 className={`tw-flex ${isOpen ? 'tw-hidden' : ''}`；HTML 中 class="p-4" 必须手动补成 class="tw-p-4"。
常见错误：prefix: 'tw'（缺短横线）→ 生成 twtext-red-500，非法类名；prefix: 'tw- '（末尾空格）→ 构建失败；把 prefix 写进 theme 或 plugins 里 → 完全不生效。
动态拼接类名时，twMerge 不是锦上添花，是刚需
写了 className="tw-p-4 tw-p-2"，浏览器按 CSS 输出顺序取最后一个生效，但这个顺序受缓存、构建工具链更新影响，极易翻车。twMerge 在运行时解析 class 字符串，自动合并冲突 utility 类：tw-p-4 tw-p-2 → 只保留 tw-p-2。
但它只认带前缀的类：tw-p-4 p-2 混用时，它无法判断优先级，也不警告；cn() 或 clsx() 传参也必须全是 tw- 开头，否则等于没用。
别指望加载顺序或 important: true 救命
把自定义 CSS 放 Tailwind 后面，看似“后来者居上”，但遇到 div .btn 这种高特异性选择器，或第三方库自带 !important（如 .el-button.is-disabled），照样被盖。important: true 会让每个 Tailwind 类加 !important，调试时 DevTools 里满屏划掉线，根本分不清哪条生效；Tailwind 官方明确说这不是设计意图，仅用于极端场景。
真正落地时，最容易被忽略的是三件事：所有 HTML/JSX 里 Tailwind 类名一个都不能漏改；preflight: false 改完必须重启验证；twMerge 的输入必须全是带前缀的类——少一个，整个链路就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
