必须关闭preflight，否则按钮变透明、标题变小等问题无法根治；因preflight规则直接重置button、h1等标签样式，不依赖类名，故prefix、import顺序均无效，且需重启开发服务器。
必须关掉 preflight，否则按钮变透明、标题字号缩小等问题无法根治——这是 Next.js 中 Tailwind 与第三方 UI 库（如 Element Plus、Naive UI、Ant Design Vue）冲突的底层原因，不是类名重复或加载顺序能绕开的。
为什么 preflight: false 是第一步且不可跳过
Tailwind 的 @tailwind base 里包含一段叫 preflight 的重置规则，例如：button, [type='button'] { background-color: transparent; }。它不依赖类名，直接作用于 HTML 标签，所以加 prefix 或调换 import 顺序完全无效。
- Next.js 默认启用 preflight，导致所有原生
button、h1、input被强制重置 - UI 库（比如 Element Plus）依赖浏览器默认样式做基础渲染，preflight 一上，按钮就“消失”了
- 配置完
corePlugins: { preflight: false }后，必须重启开发服务器（Vite/HMR 不会自动重建这部分 CSS）
如何在 Next.js 中安全控制样式加载顺序
Next.js 的 CSS 加载机制比普通 Vite 项目更隐蔽：CSS 文件可能被 next/head 注入、SSR 服务端注入、或由插件动态插入。仅靠 import 顺序不够稳定。
- 在
app/layout.tsx或pages/_app.tsx中，确保@tailwind base没有被引入（因为已关 preflight，@tailwind base只剩极少内容，可删） - UI 库的 CSS（如
element-plus/dist/index.css）应通过next.config.js的css-loader配置或app/head显式注入，并放在 Tailwind 的@tailwind utilities之后 - 禁用
unplugin-vue-components等插件的自动 CSS 导入（设dirs: []或关闭autoImport），避免其把 UI 库样式插到 DOM 末尾
prefix: 'tw-' 必须全量落地才有效
开启前缀只是开始，不是配置完就万事大吉。Next.js 项目中动态 class、MDX、Server Components、Client Components 的 class 字符串来源分散，漏一处就失效。
- HTML/JSX 中所有 Tailwind 类必须手动加
tw-，包括className={`tw-p-2 ${isOpen ? 'tw-block' : 'tw-hidden'}`} - MDX 文件里的 class 也要改，可用
remark-plugin批量处理，但需验证输出是否含tw- - 不要混用裸类和带前缀类：
tw-p-2 p-4会被twMerge忽略，浏览器按最终 CSS 文件顺序取值，极易翻车 - 错误写法：
prefix: 'tw'→ 生成twtext-red-500（非法类名）；正确是prefix: 'tw-'
什么时候该考虑 important: true？
只在 preflight 已关、prefix 已配、加载顺序已控，但仍有零星样式被 UI 库覆盖时启用——比如某个 .el-input__inner 还是压过了你的 tw-border-blue-500。
- 必须写成
important: true（布尔值），不是字符串"true" - 全局启用风险高：会影响你后续用
!tw-text-sm做精细控制，建议局部限定：important: '#app' - 它对
@apply、自定义组件类、第三方类名（如n-button）完全无效，别指望靠它“一键修复全部”
真正上线前最容易漏的是三件事：preflight 关了但没重启 dev server、HTML 里有一处 class 忘加 tw-、UI 库 CSS 被插件悄悄后置。这三处任意一个出问题，都会让样式在某类页面或某个构建环境下突然失灵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
