Tailwind CSS 实战技巧

原子化 CSS 的核心理念

Tailwind CSS 采用"原子化 CSS"的方法论——每个 class 只做一件事。它不是提供预设的组件样式，而是提供底层工具类，让你自由组合出任何设计。这种方式消除了 CSS 的层叠冲突和命名困难，让样式代码更可预测。

响应式设计

Tailwind 的响应式前缀让断点适配变得极其简单。所有工具类都支持断点前缀，遵循"移动端优先"原则：

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- 移动端1列 → 平板2列 → 桌面3列 -->
</div>

暗色模式

通过 `dark:` 前缀，可以在一行代码中同时定义亮色和暗色样式。配合 Tailwind v4 的 `prefers-color-scheme` 媒体查询或手动切换 `class` 策略：

<div class="bg-white dark:bg-black text-zinc-900 dark:text-zinc-50">
  自动适配暗色模式
</div>

组件提取

当工具类列表变得过长时，不要急着写自定义 CSS。先考虑是否应该提取为一个可复用的组件。React 组件本身就是样式复用的最佳载体，这不是 Tailwind 的问题，而是组件设计的信号。

善用 @apply

在全局 CSS 中，使用 `@apply` 可以组合常用的工具类模式。但要注意适度使用——过度依赖 `@apply` 会失去原子化 CSS 的优势。只在真正需要复用的基元样式上使用它。

性能考量

Tailwind CSS v4 在构建时会自动移除未使用的样式（Purge），确保生产环境的 CSS 文件只包含你实际使用的类。结合 Next.js 的代码分割，每个页面的样式负载都控制在最小范围。

总结

Tailwind CSS 的学习曲线看似陡峭，但一旦掌握，它可能是你用过的最快的样式工作流。记住核心原则：原子化组合 > 预设组件，组件提取 > 自定义 CSS。