应仅在同类工具类组合真实复用≥3次、语义明确（如btn-primary）、无响应式/状态修饰符且无动态变量时使用@apply；否则宜直接写工具类以保灵活与可维护性。
Tailwind CSS 本身不减少冗余，它把冗余从 CSS 文件转移到 HTML 中——关键在于你是否用对了抽象层级。
什么时候该提取 @apply，什么时候该忍着不提
直接在 HTML 里写 text-lg font-medium text-gray-800 p-4 rounded-lg bg-white shadow-sm 看似冗长，但只要这个组合只出现一次，就别急着抽成 class。抽得太早反而锁死样式意图，后续改一个间距就得改 class 定义、再改所有调用点。
真正该抽 @apply 的信号是：
– 同一组 utility 出现在 ≥3 个不同组件中
– 这组样式有明确语义（比如 btn-primary、card-body），且未来可能整体调整
– 它包含响应式变体（如 md:p-6 lg:p-8），手动重复太易错
反例：为 flex items-center gap-2 单独建个 flex-center class——这没语义，只是布局手段，后期加 justify-between 就得重构，不如留原样。
立即学习“前端免费学习笔记（深入）”；
theme() 和 config.theme.extend 别乱动颜色/间距比例
很多人一上来就改 theme.spacing 或 theme.colors.blue，结果团队协作时发现“我写的 py-5 在你机器上是 1.5rem，我本地是 1.25rem”——因为某人偷偷改了基础比例。
更稳妥的做法是：
– 所有业务定制色用 extend.colors 新增（如 brand: '#3b82f6'），不动 blue
– 间距/圆角等标尺类配置，除非全项目统一升级设计系统，否则保持默认值
– 真需要特殊尺寸？用 px-1.5、rounded-[3px] 这类任意值语法，不污染主题
这样既保留 Tailwind 的可预测性，又避免“改一处，崩一片”。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
HTML 层级变深时，group/peer 比一堆 hover: 更省代码
比如卡片悬停显示操作按钮，传统写法是给按钮加 opacity-0 group-hover:opacity-100，但如果按钮嵌套三层 div，就得写 group-hover:[&>*:nth-child(3)]:opacity-100——难读还易断。
正确姿势：
– 外层容器加 group
– 按钮加 group-hover:opacity-100（哪怕中间隔了 div）
– 需要跨兄弟元素联动？用 peer + peer-checked:~，比如开关控制右侧说明文字显隐
注意：group 只作用于**后代元素**，不支持父级或同级；想控制同级要用 peer，且触发元素必须是 peer 元素的**前序兄弟节点**。
不要用 @layer utilities 补充自定义工具类
看到别人写 @layer utilities { .scrollbar-none { scrollbar-width: none; } } 就跟着抄？危险。Tailwind 的 utility-first 不是让你造轮子，而是约束表达边界。
这类“伪 utility”问题在于：
– 不参与响应式（md:scrollbar-none 无效）
– 不兼容 dark mode（dark:scrollbar-none 不生效）
– 构建时无法被 PurgeCSS 识别，可能残留无用代码
真要处理滚动条？用 class="!scrollbar-none" 配合 scrollbar-width: none 写在 @layer base；或者直接写内联 style——毕竟这种样式极少复用，不值得升格为 utility。
最常被忽略的一点：Tailwind 的“少写 CSS”是以“多写 class 名”为代价的，而 class 名数量爆炸后，真正拖慢开发的是**语义模糊**——比如 mt-4 md:mt-6 lg:mt-8 到底表达什么？是“标题下方留白”，还是“卡片分隔距离”，还是“表单控件间隙”？一旦含义不清，后续维护者只能猜。所以比压缩字符更重要的，是让每个 class 组合都可推断意图。
