Tailwind 通过原子类“积木式拼装”实现样式控制，每个类只负责单一属性，需按顺序书写响应式与状态类，高频组合应抽离为自定义组件类以提升可维护性。
直接在 HTML 标签的 class 属性里组合 Tailwind 提供的单职责类名，就能快速构建出结构清晰、响应及时、主题一致的现代 UI 界面。它不靠语义化组件类，而靠“积木式拼装”——每个类只管一个样式属性，比如 px-4 控制左右内边距，text-lg 控制字体大小，hover:bg-gray-100 控制悬停背景色。
用原子类代替传统 CSS 规则
别写 style="margin: 1rem; color: #1e40af;"，也别建一堆自定义 CSS 类。Tailwind 的设计哲学是：所有样式都通过 class 表达。例如：
- 按钮背景统一用
bg-blue-500 hover:bg-blue-600 dark:bg-blue-700，深色模式自动生效 - 文字对齐和间距用
text-center my-6，而不是text-align: center; margin-top: 1.5rem; - 圆角、阴影、过渡效果分别用
rounded-lg shadow-sm transition-colors，各司其职
响应式断点必须写在同一 class 属性中
Tailwind 的 md:、lg: 等前缀依赖解析器读取完整 class 字符串。拆开或动态拼错会导致断点失效。
- ✅ 正确：
class="text-base md:text-xl font-medium" - ❌ 错误：
class="text-base" class="md:text-xl"（浏览器只认最后一个） - JS 动态添加时用模板字符串：
class={`${base} ${isWide ? 'md:w-1/2' : 'w-full'}`
交互状态类要放在 class 列表末尾
Tailwind 按 class 出现顺序覆盖样式。状态类（如 hover:、focus:、disabled:）必须后置，否则会被基础类覆盖。
立即学习“前端免费学习笔记（深入）”；
- 表单输入框边框：
border border-gray-300 focus:border-blue-500（focus 在最后才有效） - 禁用按钮：
bg-gray-200 text-gray-500 cursor-not-allowed disabled:opacity-70 - 避免同时写
flex flex-col flex-row——后者会覆盖前者，且不易察觉
高频组合建议抽离为自定义类
当某组类反复出现（如卡片容器、标题样式），不要硬编码超长 class，而是用 @layer components 封装：
- 在 CSS 文件中定义：
@layer components { .card { @apply bg-white rounded-xl shadow p-6; } } - HTML 中使用：
<div class="card">... - 这样既保持可读性，又避免 PurgeCSS 误删未显式出现的组合（如
hover:from-blue-500）
不复杂但容易忽略。关键不是堆得多，而是堆得准、堆得顺、堆得有章法。
