前端第一框架，每周下载1.1亿次，被AI摧毁了！

前端开发有个非常神奇的开源框架。

一方面，它的热度依然高得惊人。

如今 Tailwind CSS 的周安装量已经超过 1.1亿次！ChatGPT、X、Cloudflare、Reddit、Shopify 等大厂产品都在使用它。

State of CSS 2025 的调查中，51%的受访者表示使用过 Tailwind CSS，在 CSS 框架中排名第一。

但另一边，却是完全不同的故事，公司收入却断崖式下降80%，工程团队被迫裁员75%，今年9月被Shopify正式收购。

一个越来越流行的开源项目，背后的商业公司却陷入困境，听起来非常矛盾。

造成这一切的罪魁祸首就是 AI， AI 一手把它推上巅峰，然后又残忍地把它摧毁。

0 1

音乐人的意外创造

Tailwind 的作者 Adam Wathan，最开始其实是个音乐人。

他经常使用 REAPER 做音频制作，REAPER 有一个很有意思的特点：支持脚本化定制。

这意味着，你可以自己写代码，让软件自动完成一些原本需要手工操作的事情。

于是 Adam 开始学习 Python，没想到这一学，就一头扎进了代码世界。

当Adam 和朋友做一些副业项目时，他发现CSS很繁琐，明明只是调整一下间距、对齐方式、颜色，却经常需要写一堆 CSS，还得不停给各种东西起名字。

在音频混音时，录音师极度依赖快捷键、宏命令和即时反馈，绝不希望中断创作流去繁琐的菜单里找工具，这种思维被他带到了CSS领域，他开始积累一套自己可以复用的工具类（Utility Classes），例如：

pt-4 ：给元素的顶部添加 16 像素的内边距。

flex ：将子元素默认横向一字排开

items-center ：使子元素居中对齐

这些小工具可以像积木一样，轻松组合，读起来也很舒服：

div>

效果大概是这样（加了背景框让效果更明显）

后来Adam在YouTube 和 Twitch 直播开发 KiteTail （一个数字产品销售平台）时，发生了一件有意思的事情。

弹幕里大量开发者根本就不关注KiteTail做得怎么样，而是不断追问：你那些 pt-4、flex、items-center 到底是哪个开源库？

Adam回复说：“这没啥，就是我用 Less/PostCSS 写的脚本，不是什么开源库。”

但是询问的人越来越多，这让Adam意识到：这东西不是自己一个人的需求，而是大家都想要的东西啊。

那还等啥啊， 赶紧整理下开源吧。

Adam给这个项目起名“Tailwind”，与最初的 KiteTail（风筝尾巴）一脉相承，一个席卷前端世界的 CSS 框架，就这样诞生了。

0 2

这是历史的倒退！

Tailwind 刚发布时，就在社区引发了轩然大波。

因为主流的思路是这样的：

在HTML创建一个Button :

class ="primary-button">

在CSS中定义这个Button长什么样子:

}

但TailWind却反过来了：

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开始疯狂增长。

Adam 和视觉设计师 Steve Schoger 是多年的朋友，两人一起做过不少项目，Adam 发现，Steve 做 UI 时有大量看似凭直觉的技巧，其实完全可以拆解成一套程序员也能理解的方法。

于是，两人把这些经验整理成了《Refactoring UI》。

这本书特别适合程序员，因为它没有跟你大讲抽象的设计理论，而是直接告诉你：

怎么把一个丑陋的页面，改得像个正常产品。

这本书对于像我这样想最初漂亮界面，但是又不知道怎么办的程序员来说，简直就是福音啊。

它第一天就卖出了接近 40 万美元，第一个月突破 100 万美元，后来累计销售额超过 250 万美元。

这笔钱也成为 Tailwind Labs 的启动资金，公司也因此走了一条罕见的路：不融风险投资，纯靠产品收入滚动。

Tailwind的商业模式是这样的：

Tailwind Plus 是他们提供的收费产品之一，提供 500+ 界面组件与模板， 相当于告诉程序员：“别花时间折腾了，我把设计、组件、响应式、状态都做好了，你拿过去改改就好。”

这极大地节省了程序员的时间，大家的付费意愿非常强烈。

只要 Tailwind CSS 越流行，理论上这个漏斗就会越来越大。

然后，AI 出现了。

0 3

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 万个网站使用。

产品越来越火，公司却越来越难赚钱。

0 4

尾声

加入Shopify对Tailwind来说，是个不错的归宿。

Shopify 是全球少有的完全将商业帝国建立在开源架构上、同时源源不断反哺生态的科技巨头，Tailwind CSS在这里应该能保持不错的发展，创始人Adam也说了，Tailwind将会继续保持开源。

只是觉得有点可惜，一种商业模式被AI摧毁了。

下一个又会是谁呢？