@apply生成重复css规则是因为它仅做文本替换、不跨文件去重，且content路径配置不当或@layer滥用会导致同一工具类被多次扫描和输出。
Tailwind CSS 构建产物里出现重复 CSS，不是 JIT 编译器“抽风”，而是你写的类名被多次匹配、多次生成，或配置没对齐导致规则冗余输出。
为什么 @apply 会生成重复的 CSS 规则？
当你在多个 CSS 文件里用 @apply 引用同一组工具类（比如都写了 @apply p-4 bg-blue-500 rounded-lg），Tailwind 不会去 dedupe，而是为每个文件单独生成一遍对应规则。最终打包出来的 CSS 里，.p-4、.bg-blue-500 这些底层类可能被重复定义多次。
- 重复发生在不同 CSS 文件中 —— 比如
components/button.css和layouts/card.css都用了@apply p-6，JIT 就会各写一次.p-6 { padding: 1.5rem; } - 如果这些文件没被 PostCSS 插件（如
cssnano）做合并压缩，重复就直接进产物 -
@apply不能跨文件复用抽象 —— 它只是文本替换，不生成“共享类”，所以别指望它像组件一样去重
content 路径漏配或过宽，触发多轮扫描
Tailwind 的 JIT 模式靠 content 字段扫描模板文件来决定“哪些类要生成”。路径配置不当，会让同一段 HTML 被扫到多次，或让不同环境（dev / prod）扫描结果不一致，间接导致规则重复注入。
- 路径写成
./src/**/*.{html,js,ts}+./public/**/*.html，而public/index.html又引用了src/App.vue中的相同 class，等于同个类被扫两次 - 使用了 Vite 的
import.meta.glob动态导入，但 glob 模式没排除构建产物目录（如dist/），导致已生成的 CSS 文件又被二次扫描 -
content包含了未启用的框架模板（如遗留的.svelte文件），Tailwind 仍会解析它们并生成无用类
第三方插件或自定义 @layer 打乱规则顺序
Tailwind 默认按 @layer base → @layer components → @layer utilities 输出 CSS。如果你在多个地方插入 @layer utilities，或插件（比如 daisyui、@tailwindcss/forms）内部也用了 @layer，就可能让同一类（如 .rounded-md）在产物中出现两遍：一遍是 Tailwind 原生的，一遍是插件重定义的。
-
daisyui的button.css里有@layer utilities { .btn { @apply rounded-md; } }，而你自己的components.css也写了@layer utilities { .my-btn { @apply rounded-md; } }，两者都会产出.rounded-md规则 - 某些插件未声明
peerDependencies版本，和你的 Tailwind 主版本不兼容，导致@layer解析错位，同一规则被写入两次 - 手动在
main.css里写了@tailwind utilities两次（比如 HMR 热更新时残留了旧指令），构建后就会复制整块 utilities
构建缓存未清理，旧规则残留
Vite、Webpack 或 PostCSS 的缓存机制有时会保留上一轮生成的 CSS 片段，尤其在你改过 tailwind.config.js 的 theme.extend 或启用了 important: true 后，旧缓存没清干净，新旧规则就叠在一起了。
- 执行
npm run build前没运行vite --force或删掉node_modules/.vite - CI 环境中复用构建缓存，但
tailwind.config.js更新后没触发缓存失效 - 本地开发时开了
TAILWIND_MODE=watch，但没重启服务，JIT 编译器还在用旧的 AST 缓存
真正容易被忽略的是：重复规则未必影响运行时表现，但会拖慢 DevTools 的 Styles 面板加载、干扰 computed 属性溯源，而且一旦开启 CSS-in-JS 或 SSR 注水，重复样式可能被服务端和客户端各自注入一次 —— 这时候不是“多了一行 CSS”，而是“多了一次关键渲染阻塞”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
