什么！你还在使用Tailwind CSS，老厂长推荐 Open Props

上一篇文章写了一篇吐槽 tailwind css的文章。好多同学认为我的观点并不全面，地址：https://juejin.cn/post/7484638486994681890 有兴趣的同学可以去批评一下。其实本篇文章接上一篇文章，给出更好的答案（前端学不动了）

你可能被 Tailwind 这样支配过：

"设计:这个按钮要改个圆角..."

"稍等,我找找 rounded-lg 后面是不是跟了 md:rounded-xl 还有 hover:rounded-2xl..." 如果你每天在 class 里堆砌几十个 Tailwind 原子类，像在破解摩斯密码------恭喜，你已经被 Tailwind "优雅地绑架" 了。今天要给大家介绍一个一个更加清爽、灵活、符合现代 CSS 发展的方案：Open Props。

Tailwind 的痛点：你以为的"高效"可能是幻觉

Tailwind 的优点众所周知（原子化、无需命名、设计系统约束），但用久了会发现：事情并不会像我们想的那样美好。

Class 爆炸，代码像乱码

html 复制代码

<!-- 一个普通的卡片，Tailwind 版 -->
<div class="w-full max-w-md p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 dark:bg-gray-800">
  <h3 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-2">标题</h3>
  <p class="text-gray-600 dark:text-gray-300">内容...</p>
</div>

问题：每个样式都要记 class 名，dark: 和 hover: 等前缀让代码像天书。
维护成本：改个间距？你得在 p-4、m-2、gap-3 里大海捞针。有时候生气就直接上style覆盖样式了，

设计系统？还是手动拼凑？

Tailwind 的主题配置（tailwind.config.js）虽然灵活，但：

改一个颜色？全局搜索替换 bg-blue-500。
想用 14px 字体？默认没这选项，得手动扩展配置。

响应式基本就是前缀地狱

html 复制代码

<div class="text-sm md:text-base lg:text-lg xl:text-xl ..."></div>

每加一个断点，class 长度指数级增长。说时候这样的代码我自己看的都想吐，并且太长了。

Open Props：CSS 变量的终极方案

Open Props 是一套基于 CSS 变量的设计系统，提供：

170+ 标准化变量（颜色、间距、字体、动画等）。
零运行时：直接调用原生 CSS 变量，无需编译。
按需使用：像乐高一样组合，不强制全家桶。

核心优势：用 CSS 的方式写 CSS

这种是我比较喜欢的书写css的方式。class可以语义化命名，页面可以实现模块化css复用。例如：

html 复制代码

<!-- 同一个卡片，Open Props 版 -->
<div class="card">
  <h3>标题</h3>
  <p>内容...</p>
</div>

<style>
  .card {
    width: var(--size-full);
    max-width: var(--size-md);
    padding: var(--size-6);
    background: var(--surface-2);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-2);
    transition: box-shadow 0.3s var(--ease-3);
  }
  .card:hover {
    box-shadow: var(--shadow-4);
  }
  /* 暗黑模式？一行搞定 */
  @media (prefers-color-scheme: dark) {
    .card { background: var(--surface-4); }
  }
</style>

语义化：--size-6 难道不比 p-6 更直观。
复用性强：变量可跨组件共享。
原生支持：直接对接 @media、:hover 等 CSS 特性。
我们何乐而不为呢？

Open Props 的特性

相对于tailwind我们要反思的是，能不能用原生的css，写出高效简洁的css代码呢？答案是肯定的。

拥抱 CSS 原生生态

直接使用 @container、:has() 等新特性，不用等 Tailwind 封装。
与 PostCSS、Sass 无缝兼容，不破坏现有工具链。

设计系统自由

css 复制代码

/* 修改主题？只需覆盖变量 */
:root {
  --brand-1: #ff7e33; /* 主色一键换 */
  --font-serif: "Your Custom Font";
}

不用啃 tailwind.config.js，CSS 变量天然全局生效。

响应式更简洁

css 复制代码

.title {
  font-size: var(--font-size-3); /* 默认 */
  @container (width > 600px) {
    font-size: var(--font-size-5); /* 容器查询！ */
  }
}

老厂长的实践建议

渐进式迁移：在现有项目中逐步替换 Tailwind 工具类。
搭配 UnoCSS：如果你离不开原子化，UnoCSS 的 CSS 变量模式能兼容 Open Props。
善用浏览器调试：DevTools 直接修改变量值，实时预览效果。

结语：CSS 的尽头是变量，不是 class

Tailwind 是时代的产物，但 CSS 的发展从未停止。Open Props 让我们回归 CSS 本应如此的体验：

更干净的代码，
更原生的兼容性，
更未来的适配能力。

是时候给你的 class="..." 减减肥了！

现在就去试试 Open Props，评论区等你来吐槽！

（附：Open Props 官方提供的交互式文档，比 Tailwind 的文档更友好哟！）