前端圈里有一个特别神奇的开源框架。
一方面，它的热度依然高得惊人。如今 Tailwind CSS 的周安装量已经超过 1.1 亿次！ChatGPT、X、Cloudflare、Reddit、Shopify 等大厂产品都在使用它。State of CSS 2025 的调查中，51% 的受访者表示使用过 Tailwind CSS，在 CSS 框架里排名第一。
但另一方面，却是完全不同的故事——公司收入断崖式下降 80%，工程团队被迫裁员 75%，今年 9 月被 Shopify 正式收购。
一个越来越流行的开源项目，背后的商业公司却陷入困境，听起来非常矛盾。造成这一切的罪魁祸首就是 AI，AI 一手把它推上巅峰，然后又残忍地把它摧毁。
音乐人的意外创造
Tailwind 的作者 Adam Wathan 最开始其实是个音乐人。
他经常使用 REAPER 做音频制作，REAPER 有一个很有意思的特点：支持脚本化定制。这意味着，你可以自己写代码，让软件自动完成一些原本需要手工操作的事情。
于是 Adam 开始学习 Python，没想到这一学，就一头扎进了代码世界。
当 Adam 和朋友做一些副业项目时，他发现 CSS 很繁琐——明明只是调整一下间距、对齐方式、颜色，却经常需要写一堆 CSS，还得不停给各种东西起名字。
在音频混音时，录音师极度依赖快捷键、宏命令和即时反馈，绝不希望中断创作流去繁琐的菜单里找工具。这种思维被他带到了 CSS 领域，他开始积累一套自己可以复用的工具类（Utility Classes），例如：
pt-4：给元素的顶部添加 16 像素的内边距flex：将子元素默认横向一字排开items-center：使子元素居中对齐
这些小工具可以像积木一样轻松组合，读起来也很舒服：
<div class="pt-4 flex items-center">
<img src="avatar.png">
<span>张三</span>
</div>
效果大概是这样（加了背景框让效果更明显）：
后来 Adam 在 YouTube 和 Twitch 直播开发 KiteTail（一个数字产品销售平台）时，发生了一件有意思的事情。
弹幕里大量开发者根本就不关注 KiteTail 做得怎么样，而是不断追问：你那些 pt-4、flex、items-center 到底是哪个开源库？
Adam 回复说：“这没啥，就是我用 Less/PostCSS 写的脚本，不是什么开源库。”
但是询问的人越来越多，这让 Adam 意识到：这东西不是自己一个人的需求，而是大家都想要的东西啊。那还等啥，赶紧整理下开源吧。
Adam 给这个项目起名 “Tailwind”，与最初的 KiteTail（风筝尾巴）一脉相承。一个席卷前端世界的 CSS 框架，就这样诞生了。
这是历史的倒退！
Tailwind 刚发布时，就在社区引发了轩然大波。
因为主流的思路是这样的。
在 HTML 创建一个 Button：
<button class="primary-button">
在 CSS 中定义这个 Button 长什么样子：
.primary-button {
background: blue;
padding: 10px;
border-radius: 5px;
}
但 Tailwind 却反过来了：
<button class="bg-blue-600 px-4 py-2 rounded-lg">
相当于在 HTML 中直接描述了：蓝色背景 + 16px 左右间距 + 8px 上下间距 + 圆角。
很多人认为：这不就是把内联样式写进 class 吗？完全违背了 HTML 负责结构、CSS 负责样式的最佳实践！是历史的倒退！
但是真正上手以后，大家发现 Tailwind 太好用了！太方便了！
终于不用在 HTML 和 CSS 两个文件之间来回切换了！也不用为起个 CSS 类名绞尽脑汁了（起名可是编程里最难的事情啊）。
Adam 特别喜欢展示这种“搭积木”的能力，他在 Twitch 和 YouTube 上开启了一系列实战直播，现场挑战“用 Tailwind 重新构建 Twitter / GitHub / Spotify 界面”。
观众亲眼目睹他在短短几十分钟内，不写一行自定义 CSS，纯靠工具类搭建出像素级还原的复杂界面。这比任何宣传都有效，Tailwind CSS 开始疯狂增长。
Adam 和视觉设计师 Steve Schoger 是多年的朋友，两人一起做过不少项目。Adam 发现，Steve 做 UI 时有大量看似凭直觉的技巧，其实完全可以拆解成一套程序员也能理解的方法。
于是，两人把这些经验整理成了《Refactoring UI》。
这本书特别适合程序员，因为它没有跟你大讲抽象的设计理论，而是直接告诉你：怎么把一个丑陋的页面，改得像个正常产品。对于像我这样想做出漂亮界面、但又不知道怎么办的程序员来说，简直就是福音啊。
它第一天就卖出了接近 40 万美元，第一个月突破 100 万美元，后来累计销售额超过 250 万美元。
这笔钱也成为 Tailwind Labs 的启动资金，公司因此走了一条罕见的路：不融风险投资，纯靠产品收入滚动。
Tailwind 的商业模式是这样的：
Tailwind Plus 是他们提供的收费产品之一，提供 500+ 界面组件与模板，相当于告诉程序员：“别花时间折腾了，我把设计、组件、响应式、状态都做好了，你拿过去改改就好。”
这极大地节省了程序员的时间，大家的付费意愿非常强烈。只要 Tailwind CSS 越流行，理论上这个漏斗就会越来越大。
然后，AI 出现了。
AI 把它推上巅峰，又亲手毁掉了它
2024 年之后，AI 编程工具开始大规模进入前端开发。
AI 很喜欢生成 Tailwind 代码，因为它的 utility-first 语法高度规则化，一个 class 通常对应一个明确的样式行为，非常适合大模型组合和修改。Tailwind 的采用率被 AI 推到了历史新高。
但是一个讽刺的悖论出现了：Tailwind 越来越流行，但公司收入却大幅下降。
原因至少有两个。
1. AI 替代
现在各种 AI Agent 都能快速产生大量免费的 Tailwind UI，并且程序员还可以要求 AI 持续修改：“把左边导航变窄一点”“改成深色主题”“这个卡片太丑了，重新设计”。
于是程序员就会发出那个灵魂之问：为什么我要花 $149/$299 买 Tailwind Plus？
2. 获客渠道被切断
Tailwind 的商业漏斗上有个关键的一环：从 Google 搜索进入 Tailwind Docs，从而看到付费产品。
有了 AI 以后，现在程序员遇到问题，都是直接问 AI，连 Google 搜索都不用了，更不会走进下一步了。
2026 年 1 月 6 日，Tailwind Labs 做出了一个艰难的决定：裁掉工程团队 4 名成员中的 3 人。
第二天，创始人 Adam Wathan 公开解释了原因：收入较峰值下降接近 80%，文档流量较 2023 年初下降约 40%。更麻烦的是，按照当时的财务预测，如果什么都不改变，大约 6 个月后公司将无法继续支付员工工资。
而这一切发生的时候，Tailwind CSS 本身却并没有衰落。恰恰相反，它比过去任何时候都更流行：月下载量依然达到数千万级别，已经被超过 61.7 万个网站使用。
产品越来越火，公司却越来越难赚钱。
尾声
加入 Shopify 对 Tailwind CSS 来说，是个不错的归宿。
Shopify 是全球少有的完全将商业帝国建立在开源架构上、同时源源不断反哺生态的科技巨头。Tailwind CSS 在这里应该能保持不错的发展，创始人 Adam 也说了，Tailwind 将会继续保持开源。
只是觉得有点可惜，一种商业模式被 AI 摧毁了。下一个又会是谁呢？这类关于前端框架与开源生态的话题，在云栈社区里也常常被大家讨论，欢迎有空来聊聊。
发表于 昨天 22:47
|
查看: 6|
回复: 0
