Tailwind
定义实用类优先（utility-first）的 CSS 框架，用组合原子类在标记中直接构建样式
Tailwind 代表与 Bootstrap 相反的路线：不提供 .btn / .card 这类成品组件，而是一套语义化原子类（flex、p-4、text-sm、rounded-lg），你在 HTML 里直接组合出样式。好处是几乎不回写 CSS、设计令牌统一、死代码可清除。
它用 JS 扫描源文件生成实际用到的 CSS（JIT），因此文件体积极小。配置文件 tailwind.config.js 可扩展主题色、间距、断点，把设计系统沉淀为令牌。
- 常用组合：flex items-center justify-between gap-4；
- 响应式前缀 sm: / md: / lg: 直接写在类名里；
- 状态前缀 hover: / focus: / dark: 覆盖交互与暗色。
HTML
<button class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-blue-500 dark:hover:bg-blue-400"> 保存 </button>
⚠ 常见误区
- 类名很长时可提取组件或 @apply，别硬扛
- dark: 前缀依赖 class 或 media 策略，需在配置里声明
- 动态拼接类名（如 `text-${color}-500`）会被 JIT 漏掉，要写全量