快到  2026  年了：为什么我们还在争论  CSS 和 Tailwind？

最近在使用 NestJs 和 NextJs 在做一个协同文档 DocFlow，如果感兴趣，欢迎 star，有任何疑问，欢迎加我微信进行咨询 yunmz777

老实说，我对 Tailwind CSS 的看法有些复杂。它像是一个总是表现完美的朋友，让我觉得自己有些不够好。我一直是纯 CSS 的拥护者，直到最近，我才意识到，Tailwind 也有其独特的优点。然而，虽然我不喜欢 Tailwind 的一些方面，但它无疑为开发带来了更多的选择，让我反思自己做决定的方式。

问题

大家争论的，不是 "哪个更好"，而是"哪个让你觉得更少痛苦"。对我来说，Tailwind 有时带来的是压力。比如：

html 复制代码

<button
  class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1"
>
  Click me
</button>

它让我想："这已经不再是简单的 HTML，而是样式类的拼凑。" 而纯 CSS 则让我感到平静、整洁：

css 复制代码

.button {
  background-color: #3b82f6;
  color: white;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}
.button:hover {
  background-color: #2563eb;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

纯 CSS 让我觉得自己在"写代码"，而不是"编排类名"。

背景说明

为什么要写这篇文章呢？因为到了 2026 年，CSS 和 Tailwind 的争论已经不再那么重要。

Tailwind 发布了  v4，速度和性能都大大提升。
纯 CSS 也在复兴，容器查询（container queries）、CSS 嵌套（nesting）和 Cascade Layers 这些新特性令人振奋。
还有像 Panda CSS、UnoCSS 等新兴工具在不断尝试解决同样的问题。这让选择变得更加复杂，也让开发变得更加"累"。

Tailwind 的优缺点

优点：

减少命名烦恼：你不再需要为类命名。只需使用 Tailwind 提供的类名，省去了命名的麻烦。
设计一致性：使用 Tailwind，你的设计系统自然一致，避免了颜色和间距不统一的麻烦。
编辑器自动补全：Tailwind 的 IntelliSense 使得开发更加高效，输入类名时有智能提示。
响应式设计更简单：通过简单的类名就能实现响应式设计，比传统的媒体查询更简洁。

缺点：

HTML 看起来乱七八糟：多个类名叠加在一起，让 HTML 看起来复杂且难以维护。
构建步骤繁琐：你需要一个构建工具链来处理 Tailwind，这对某些项目来说可能显得过于复杂。
调试困难：开发者工具中显示的类名多而杂，调试时很难快速找到问题所在。
不够可重用：Tailwind 的类名并不具备良好的可重用性，你可能会不断复制粘贴类，而不是通过自定义组件来实现复用。

纯 CSS 的优缺点

优点：

更干净的代码结构：HTML 和 CSS 分离，代码简洁易懂。
无构建步骤：只需简单的 <link> 标签引入样式表，轻松部署。
现代特性强大：2025 年的 CSS 已经非常强大，容器查询和 CSS 嵌套让你可以更加灵活地进行响应式设计。
自定义属性：通过 CSS 变量，你可以轻松实现全站的样式管理，改一个变量，所有样式立即生效。

缺点：

命名仍然困难：即使有 BEM 或 SMACSS 等方法，命名仍然是一项挑战。
保持一致性需要更多约束：没有像 Tailwind 那样的规则，纯 CSS 需要更多的自律来保持一致性。
生态碎片化：不同团队和开发者采用不同的方式来组织 CSS，缺少统一标准。
没有编辑器自动补全：不像 Tailwind，纯 CSS 需要手动编写所有的类名和样式。

到 2026 年，你该用哪个？

Tailwind 适合：

使用 React、Vue 或 Svelte 等组件化框架的开发者
需要快速开发并保证一致性的团队
不介意添加构建步骤并依赖工具链的人

纯 CSS 适合：

小型项目或静态页面
喜欢简洁代码、分离 HTML 和 CSS 的开发者
想要完全掌控样式并避免复杂构建步骤的人

两者结合：

你可以在简单的页面中使用纯 CSS，在复杂的项目中使用 Tailwind 或两者结合，以此来平衡灵活性与效率。

真正值得关注的 2026 年趋势

容器查询：响应式设计不再依赖视口尺寸，而是根据容器的尺寸进行调整。
CSS 嵌套原生支持：你可以直接在 CSS 中使用嵌套，避免了依赖预处理器。
Cascade Layers：这让你能更好地管理 CSS 优先级，避免使用 !important 来解决冲突。
View Transitions API：它让页面过渡更平滑，无需依赖 JavaScript。

这些新特性将极大改善我们的开发体验，无论是使用纯 CSS 还是借助 Tailwind。

结尾

不管是 Tailwind 还是纯 CSS，都有它们的优缺点。关键是要根据项目需求和个人偏好做出选择。至于我：我喜欢纯 CSS，因为它更干净，HTML 更直观。但是如果项目需求更适合 Tailwind，那我也会使用它。 2026 年的开发趋势，将让我们有更多选择，让我们能够用最适合的工具解决问题，而不是纠结于某种工具是否"最好"。

快到 2026 年了：为什么我们还在争论 CSS 和 Tailwind？

问题