preflight: false 是硬性前提，必须在 tailwind.config.js 中写死 coreplugins: { preflight: false }，否则旧框架样式会被 tailwind 全局重置覆盖；prefix: 'tw-' 需全量替换类名并配合 twmerge；shadow dom 中须手动注入 css 字符串且 mode 必须为 "open"。
preflight: false 是硬性前提，不是可选项
旧项目里按钮边框消失、表格单元格塌陷、图标对齐错乱——这些不是 Tailwind 没生效，而是 preflight 插件注入的全局重置规则（* {}、img { display: block } 等）直接覆盖了 Bootstrap 4、Element UI 或 Ant Design Vue 自带的默认样式逻辑。
必须在 tailwind.config.js 中写死这一项：
corePlugins: {
preflight: false
}
漏掉它，其他配置全对也白搭。这不是“建议关闭”，是构建前必须确认存在的配置项。
prefix: 'tw-' 要配 + 全量替换 + twMerge 配合
prefix: 'tw-' 只会让 Tailwind 生成的类加前缀（如 tw-p-4），但不会动你模板里写的 class="btn btn-primary"，也不会改第三方组件输出的 el-button 类名。冲突根源是字符串重复，不是加载顺序。
-
prefix必须带短横线：prefix: 'tw-'，写成prefix: 'tw'会生成非法类名twtext-red-500 - 所有手写工具类必须手动替换：
p-4→tw-p-4，text-center→tw-text-center - 动态拼接字符串（如
className={`p-4 ${isOpen ? 'hidden' : ''}`）要改成tw-p-4和tw-hidden - 用
twMerge合并 class，但它只认带前缀的类；混用tw-p-4 p-2会导致不可控覆盖
@layer base 覆盖原生 reset，比删 @tailwind base 更安全
Tailwind CSS 4.x 开始，不再推荐删掉 @tailwind base，因为那会丢失 @layer base 里的有用规则（比如现代表单默认样式）。正确做法是把旧 UI 库的 reset 或基础样式挪进 @layer base 块里，让它自然覆盖 Tailwind 的 @tailwind base 输出。
例如 Vant 的样式引入方式：
@layer base {
@import 'vant/lib/index.css';
}
这样既保住了 Tailwind 的 base 层能力，又让 Vant 的重置逻辑优先生效。老项目若用自定义 reset，也应放在这里，且确保 content 字段包含该文件路径，否则 JIT 不会扫描到。
Shadow DOM 场景下，Tailwind 样式根本不会自动进入
Web Component 里写了 class="tw-p-4" 却没效果？不是类名写错，是 Shadow DOM 的样式隔离机制阻止外部 CSS 匹配内部元素。DevTools 里能看到 class 存在，但 Computed 面板查不到样式——这是典型表现。
必须手动把编译后的 CSS 字符串注入 shadowRoot：
- 不能用
<link rel="stylesheet">或@import，它们在 shadowRoot 内无效 - Vite 用户可用
import tailwindCSS from '@/styles/tailwind.css?raw'（需配vite-plugin-css-injected-by-js） - 注入时机必须在
connectedCallback()里，且加防重复标记：if (!shadowRoot.querySelector('style[data-tailwind-injected]')) -
mode: 'open'是前提，mode: 'closed'下appendChild()会静默失败 -
content字段必须覆盖 Web Component 模板路径，否则 JIT 根本不生成对应类
前缀、preflight、layer base 这些都是代码层隔离，而 Shadow DOM 是运行时隔离——两者不互斥，但必须分别处理。最容易被忽略的是：哪怕前缀和 preflight 都配好了，Shadow DOM 里没注入 CSS 字符串，照样什么样式都不显示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
