Tailwind类名无效需检查三件事：content路径未包含源文件致类被Purge；CSS入口未引入或顺序错误（base须在最前）；自定义/第三方样式权重过高覆盖原子类。
Tailwind类名写出来却没效果？检查这三件事
不是类名写错，就是样式没生效——大概率是Tailwind没正确加载或配置被覆盖。
-
tailwind.config.js里content路径没包含你的HTML/JSX文件，导致类名被Purge掉（开发时关掉purge可快速验证） - CSS入口没引入
@tailwind base/@tailwind components/@tailwind utilities，或顺序错了（base必须在最前） - 自定义CSS或第三方库的样式权重太高，比如用了
!important或更具体的选择器，把text-red-500给盖掉了
响应式断点怎么写才不混乱
Tailwind的断点本质是媒体查询封装，但很多人误以为“加个前缀就自动适配”，结果在小屏看到大屏样式。
- 断点前缀如
md:text-center只在min-width: 768px及以上生效，**不会重置更小屏幕的样式**；想小屏居左、中屏居中、大屏居右，得写全：text-left md:text-center lg:text-right - 别用
sm:覆盖所有基础样式，因为sm:在640px就触发，而很多手机横屏也超这个值，容易误判“移动端” - 自定义断点要改
theme.screens，不能只改breakpoints——后者在新版Tailwind已废弃
用flex和grid类快速对齐，但内容错位了
原子类不是万能胶，flex 和 grid 的行为差异会直接暴露在布局上。
-
flex默认是flex-row+flex-wrap关闭，子元素不会换行；要换行必须显式加flex-wrap，否则内容溢出容器 -
grid-cols-3是按列数均分，但若子元素本身有min-width（比如图片），可能撑破网格；这时该用grid-cols-[repeat(auto-fit,minmax(200px,1fr))))]动态计算 -
justify-between和justify-around对子元素数量敏感：只有2个子元素时，between看着正常；3个以上，around才能保证间隙均匀
想复用样式又不想写CSS？小心@apply的陷阱
@apply 看似方便，但滥用会让原子化优势反噬维护性。
立即学习“前端免费学习笔记（深入）”；
-
@apply不能嵌套使用（比如在另一个@apply里调用），也不能跨文件引用；它只是把类名内联展开，不是变量 - 含响应式前缀的类（如
md:hover:bg-blue-50）不能直接@apply，会报错；必须拆成@screen md { &:hover { @apply bg-blue-50; } } - 真正该提取的是语义化组合，比如
btn-primary，而不是text-sm font-bold p-2 rounded这种纯原子拼接——后者改一个参数就得全局搜
Tailwind的原子性不是为了消灭CSS，而是把样式决策从“写选择器”变成“选组合”。最难的从来不是写类名，而是判断哪些组合该固化、哪些该保持灵活——这个边界，得靠项目迭代慢慢试出来。
