tailwind不生效主因是content路径未覆盖模板文件，因其构建期仅扫描content指定路径中的类名字符串，@import外部css或动态拼接类名若未显式出现在扫描范围内，对应样式即被忽略。
不能直接引入外部CSS文件——Tailwind的按需生成机制会忽略它，哪怕你用@import或<link>，只要类名没出现在content扫描路径里，就不会进最终CSS。
为什么@import外部CSS文件不生效
Tailwind不是运行时解析器，它只在构建期扫描你项目中所有被content配置覆盖的文件（如.html、.vue、.jsx），提取其中出现的类名字符串，再生成对应样式。你在app.css里写@import './my-styles.css'，但my-styles.css里的.btn-primary没在任何模板里显式写出，Tailwind根本不会处理它。
常见错误现象：
- 页面上写了
class="btn-primary"，但没样式 - 控制台无报错，DevTools里查不到该类的CSS规则
- 手动检查最终生成的CSS文件，确认里面确实没有
.btn-primary
想复用已有CSS，应该怎么做
把外部CSS“翻译”成Tailwind能识别的格式，而不是试图绕过它的构建逻辑。
- 如果只是少量类（如
.sr-only），用addUtilities注入：plugin(({ addUtilities }) => { addUtilities({ '.sr-only': { position: 'absolute', clip: 'rect(0 0 0 0)' } }) }) - 如果是整套组件样式（含
&:hover、&::before等），改用addComponents，它支持嵌套和伪类 - 如果原CSS是主题色、间距等设计变量，应统一收口到
theme.extend里，再通过theme()在插件中引用 - 避免把
.css文件直接扔进content数组——Tailwind只扫描HTML/JSX/Vue等模板中的类名字符串，不解析CSS文件内容
哪些情况可以例外使用@import
仅限于以下两类不参与Tailwind类名生成流程的纯CSS资源：
- 第三方字体加载，例如
@import url('https://fonts.googleapis.com/css2?family=Inter'); - 重置基础样式（如
normalize.css），且你明确不需要Tailwind的@tailwind base——此时应禁用@tailwind base，否则可能冲突
注意：@import必须写在app.css最顶部，在@tailwind base之前；否则PostCSS可能因顺序问题报错。
content路径遗漏是最隐蔽的失效原因
即使插件写对了、addUtilities调用也正确，只要content没覆盖到实际使用该类的文件，它就永远不会生成。
- Vue项目要包含
./src/**/*.vue - Laravel Blade要包含
./resources/**/*.blade.php - 如果你在JSX里动态拼接类名（如
className={`btn ${isPrimary ? 'btn-primary' : ''}`}），这个btn-primary必须出现在某个静态字符串里，否则JIT无法捕获 - 正则匹配类名（如
text-2.5rem）必须搭配matchUtilities，不能靠content扫描——这是唯一不依赖content的类名生成方式
真正容易被忽略的是：插件加完后，你得立刻验证content是否真的扫到了那个用了自定义类的文件。漏掉一个路径，整个功能就静默失效，而且没有任何构建错误提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
