tailwind类名无效通常因加载失败、响应式逻辑错误或任意值语法不被jit识别——先确认css加载成功，再检查是否遗漏基础类，最后确保任意值为字符串字面量。
Tailwind类名写出来却没效果，八成不是你写错了，而是加载链断了或组合逻辑没对上——先别删代码，按顺序排查这三件事。
类名写了但样式不生效？先查Tailwind是否真正加载
Tailwind不是“写了就生效”的CSS，它依赖构建流程或CDN脚本注入。浏览器里查元素，如果text-blue-500这类类名根本没出现在computed styles里，大概率是CSS压根没加载成功。
- 用CDN时，必须在
里放<script src="https://cdn.tailwindcss.com"></script>，且不能放在底部 - 用构建方式（推荐），确认
src/index.css或入口CSS里有且仅有这三行：@tailwind base;、@tailwind components;、@tailwind utilities;，且base必须在最前 - 开发时怀疑Purge导致类被删？临时在
tailwind.config.js里加purge: false（仅限dev），再刷新看是否恢复
响应式类单独写没反应？必须配基础类一起用
Tailwind的响应式前缀（如md:flex、lg:text-right）不是“开关”，而是“条件增强”。它不会自动补全基础行为，只在满足断点时启用对应声明。
-
md:flex只在≥768px时设display: flex，但小屏下仍是display: block——如果没写flex，中屏也不会变flex布局 - 想实现“小屏竖排、中屏横排”，得写
flex flex-col md:flex-row，而不是只写md:flex-row - 断点值以
tailwind.config.js里的theme.screens为准，别凭经验猜sm是640px还是768px；手机横屏常超sm，慎用sm:覆盖所有基础样式
任意值语法text-[#1e3a8a]为啥有时失效？JIT编译有硬限制
任意值语法（text-[#1e3a8a]、px-[1.875rem]）依赖JIT引擎静态扫描字符串。动态拼接、变量插值、运行时生成的class，JIT根本看不到，自然不生成对应CSS。
- 写
class="text-[${color}]"或className={`text-[${color}]`}——无效，JIT无法解析变量内容 - 写
class="text-[#1e3a8a] md:text-[#3b82f6]"——有效，字符串字面量可被扫描到 - 生产环境CI打包漏类？检查正则配置是否太松（如
content路径没包含JSX/TSX文件），或升级到v3.4+修复已知匹配bug - 更稳方案：改
tailwind.config.js，在theme.extend.colors里加brand: '#1e3a8a'，然后用text-brand
想复用bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded？别滥用@apply
@apply是把原子类内联展开成CSS规则，不是定义变量。它解决的是“重复书写”，但会破坏原子化带来的响应式和主题切换能力。
-
@apply md:hover:bg-blue-50会报错——带前缀的类不能直接@apply，得拆成@screen md { &:hover { @apply bg-blue-50; } } -
@apply不能跨文件引用，也不能嵌套调用，维护成本随项目增大而飙升 - 真要封装，优先用语义化组件（如React的
Button），或用@layer components配合@apply，并确保只封装带业务含义的组合（如btn-primary），而非纯原子堆砌
最难的从来不是记住pt-4代表什么，而是判断什么时候该用flex-wrap而不是grid-cols-3，或者为什么justify-between在3个子元素时间隙不对——这些细节不在文档首页，但在你第一次布局错位时，就会立刻撞上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
