tailwind规范写法是克制使用原子类并遵循语义顺序：布局→尺寸→间距→视觉→文本→状态→响应式，禁用随意堆砌与顺序错乱；@apply仅用于稳定跨组件复用的纯原子组合，禁用含响应式或状态修饰符的封装。
直接用 className 写原子类就是规范写法，所谓“符合规范”不是指模仿传统 CSS 的命名或组织方式，而是指遵循 Tailwind 的设计约束和团队协作实际需要的结构逻辑。
为什么不能把 Tailwind 当成普通 CSS 来写？
很多人试图在 HTML 里堆砌几十个类、随意打乱顺序，或者把响应式类插在中间，结果导致可读性差、diff 难、协作成本高。Tailwind 不禁止你这么写，但它的工程价值恰恰体现在克制使用——它提供的是“受控的自由”，不是无序拼贴。
- 类名顺序影响渲染优先级：比如
text-red-500 hover:text-blue-600和hover:text-blue-600 text-red-500在极少数嵌套 hover 场景下可能表现不同（尤其搭配@layer components时） - 响应式前缀必须放在最前：
md:flex有效，flex md:flex-col中的md:flex-col会被忽略（因为解析器按空格切分后，md:只作用于紧随其后的类） - 重复类名不合并：写两次
p-4就是两次 padding，不会去重——这常被误认为“bug”，其实是预期行为
类名组织有明确推荐顺序
这不是官方强制标准，但在中大型项目中已被验证为降低认知负荷的关键实践。按语义层级从左到右排列：
- 布局类：
flex、grid、container、hidden - 尺寸类：
w-full、h-12、max-w-lg - 间距类：
p-4、mx-auto、gap-3 - 视觉类：
bg-gray-100、rounded-lg、shadow-sm - 文本类：
text-lg、font-medium、text-center - 状态类：
hover:bg-blue-600、focus:ring-2、disabled:opacity-50 - 响应式类：
md:px-6、lg:grid-cols-3（必须放最后）
例如：flex items-center justify-between w-full p-4 bg-white rounded-lg text-gray-800 hover:bg-gray-50 md:p-6 lg:justify-start —— 这种顺序让别人一眼看出“这是个弹性容器，带基础样式和悬停态，最后才看它在大屏怎么变”。
什么时候该用 @apply？什么时候不该？
@apply 是把多个原子类聚合成一个自定义类，但它不是“为了减少 HTML 类数”而存在的工具。滥用会导致样式脱离上下文、调试困难、破坏 JIT 模式下的 tree-shaking。
- ✅ 推荐用：
@apply封装真正稳定、跨组件复用的 UI 原子，比如按钮基类、卡片阴影组合、表单输入框默认边框等 - ❌ 禁止用：
@apply封装仅在一个地方出现、含响应式或状态修饰符的组合（如@apply md:flex hover:bg-gray-100），这类写法无法被 JIT 正确识别，且失去响应式类的条件性 - ⚠️ 注意：
@apply不支持嵌套伪类（&:hover）或媒体查询，所有状态/断点仍需在 HTML 层显式写出
示例正确用法：
.btn-primary {
@apply inline-flex items-center justify-center px-4 py-2 font-medium rounded-lg bg-blue-500 text-white;
}
/* 使用时仍要单独加 hover */
<button class="btn-primary hover:bg-blue-600">Submit</button>
团队协作中最容易被忽略的三件事
很多项目初期没踩坑，上线半年后开始抱怨“Tailwind 越写越乱”，问题往往出在以下三点没落实：
- 没统一
tailwind.config.js的content路径配置，导致某些页面的类名未被扫描，JIT 编译后丢失样式（常见于动态className拼接或 CMS 内容） - 没禁用编辑器自动排序插件（如 Prettier 的
tailwindcss/no-custom-classname规则未启用），导致保存即重排类名，Git diff 全是噪音 - 没建立
classNames.ts或类似工具函数来收口高频组合（如container+mx-auto+px-4 sm:px-6），而是靠人肉记忆，新人上手成本陡增
真正的规范，不在语法层面，而在这些具体落地动作是否被当作基建对待。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
