核心用法
Tailwind CSS 采用原子化 CSS（Atomic CSS）理念，将单一 CSS 属性封装为可复用的工具类（如 flex、pt-4、text-center），开发者直接在 HTML 中组合这些类完成样式构建，无需编写传统 CSS。
关键特性
响应式设计：采用移动优先策略，无前缀类默认生效于所有尺寸，sm: md: lg: 等前缀在断点及以上生效。注意 md:block 表示 medium 及以上显示，而非仅 medium。
暗黑模式：通过 dark: 前缀实现，需配置 darkMode: 'class' 并手动在 <html> 或 <body> 添加 dark 类；或使用 'media' 模式自动跟随系统偏好。
状态变体：原生支持 hover:、focus:、active:，以及 group-hover:（父元素添加 group）、peer-focus:（相邻元素添加 peer）等交互状态，支持链式组合如 dark:hover:bg-gray-700。
任意值与 @apply：bg-[#1da1f2] 语法支持一次性自定义值；@apply 指令可在 CSS 中提取工具类，但会丢失响应式/状态变体，且顺序影响覆盖结果，官方推荐优先使用 HTML 类。
JIT 编译引擎：v3 起默认启用，仅生成实际使用的类，无需配置 purge，显著减小产物体积。
显著优点
- 开发效率极高：无需命名类名、切换文件，HTML 即样式
- 设计系统一致性：内置 spacing、color 等 token，强制规范
- 产物体积小：JIT 按需生成，未使用样式自动剔除
- 高度可配置：通过
tailwind.config.js扩展主题、断点、插件 - 生态成熟：配合 Headless UI、Tailwind UI 快速搭建完整界面
潜在缺点与局限性
- HTML 冗长：复杂组件类名堆积，可读性下降（可用
@apply或组件封装缓解） - 学习成本：需记忆大量工具类缩写及变体规则
- 动态类名陷阱：模板字符串如
bg-${color}-500无法被 JIT 检测，需使用完整类名或 safelist - @apply 局限：丢失响应式与状态能力，维护成本反增
- 配置敏感：
content路径遗漏会导致生产环境样式缺失，调试困难
适合人群
- 追求快速迭代的中小型项目团队
- 需要统一设计系统的大型产品
- 熟悉 CSS 但希望减少样式文件维护的开发者
- 配合 React/Vue 等组件化框架使用效果更佳
常规风险
- 构建配置失误：
content数组未覆盖所有模板文件，生产构建样式残缺 - 滥用 `!important`：
!mt-4或全局important: true引发特异性战争，破坏第三方组件 - safelist 误用：过度使用通配符如
bg-*导致产物膨胀，抵消 JIT 优势 - 移动端视口问题：
h-screen在移动端浏览器存在地址栏动态显示导致的布局异常，应优先使用h-dvh（dynamic viewport height）