先靠一本设计书攒本钱，再把开源框架的付费模板做到 5 个月约 200 万美元：Tailwind UI 的开源变现账

先说结果：一个免费的开源 CSS 框架，上线两年多之后才有了自己的付费产品，而这个付费产品用了大约 5 个月就累计卖到约 200 万美元。这个案例最值钱的地方不是那个数字，而是它把「免费框架、付费的书、付费的模板」三层收入的先后顺序讲清楚了：先有书养人，再有框架养用户，最后才有模板变现。

1 档案卡

项	内容
人	Adam Wathan，此前靠技术书和视频课程赚钱的独立作者；合伙人 Steve Schoger
产品	Tailwind UI，建在开源框架 Tailwind CSS 之上的付费组件与模板
赛道 / 收入路径	模板主题，一次性买断
收入快照	截至 2020 年 8 月 2 日，据 Adam Wathan 在其博客自述，Tailwind UI 累计营收约 200 万美元；截至 2022 年 9 月，据 Adam Wathan 在 Indie Hackers AMA 自述，Tailwind UI 年营收为七位数美元，具体数字未给
结局	运营中（本文只覆盖到 2022 年 9 月，之后的数字不在一手来源里，不写）

2 起点

Tailwind CSS 不是从「我要做一个框架」开始的。据 Adam Wathan 在其博客自述，起因是他在 YouTube 上直播开发一个叫 KiteTail 的项目，观众反复追问他写 CSS 的方法。他把这归结为”the benefit of working in public”。框架的 v0.1.0 版本发布于 2017 年 11 月 1 日，免费开源。

这时候他并不是一个没有收入的开发者。据他在 Indie Hackers AMA 里自述，2016 年出的第一本书，发售第一周就收了 61,392 美元。出书之前他手上的盘子并不大：Twitter 3,500 个粉丝，邮件列表 1,500 人。之后的两个课程也有账可查：一门 Laravel 测试驱动开发的课程，累计营收超过 100 万美元；2018 年出的一门 Vue 进阶课程，累计营收约 30 万美元。

也就是说，在做 Tailwind 的头两年，框架本身免费、没有付费层，这段时间他公开的收入只有书和课。

真正让他能全职扑到 Tailwind 上的，是另一本书。据他在博客自述，2018 年 12 月《Refactoring UI》出版，这本书给了他们转向全职做 Tailwind 的一大笔本钱。具体是多少，这篇博客没有写，后面第 4 段用另外两份来源补上了这本书后来的数字。

他为什么要放下已经赚钱的书和课去全职做一个免费的东西，博客里有一段自述，本文转述如下：他说 Tailwind CSS 是他做过的影响最大的项目，感觉离成为他一生最重要的作品只差一点，一想到不下功夫把它推过那道坎，他就难受。这是他给出的唯一动机，本文不再往里加。

把这一段的时间先摆好：2017 年 11 月框架开源，2018 年 12 月书出版，2019 年 5 月 13 日框架发到 v1.0，2020 年 2 月 26 日 Tailwind UI 以早期访问的形式上线。从框架开源到付费产品上线，中间隔了大约两年零四个月；从书出版到付费产品上线，隔了大约 14 个月。这两个间隔是本文按日期算的，不是他本人给出的说法。

3 第一批用户从哪来

先说清楚一件事：Tailwind UI 的第一批买家具体从哪来，这三份来源都没有拆分，本文不编。能确定的是，付费产品上线之前，免费框架已经攒下了一个很大的用户池。据他在博客自述，到 2020 年 8 月，Tailwind CSS 在 npm 上的累计安装量是 1,000 万次。

这个用户池是怎么攒起来的，他在 AMA 里给了两条，都跟「宣传」这件事有关。

第一条是文档。他的原话是”our documentation…is absolutely marketing”。也就是说，他们不把文档当成写完代码之后的收尾工作，而是当成把人拉进来的东西来做。

第二条是社交媒体上的投入强度。据他在 AMA 里自述，有些推文背后是两周接近全职的工作量。一条推文花两周，这个数字放在这里，是为了说明他们在传播上的投入不是顺手发一发。

至于从免费用户到付费买家之间的逻辑，他在 AMA 里说得很直白，本文转述：免费的 CSS 框架制造了一个庞大的用户群，只要其中有一定比例的人觉得付费模板值得买，生意就成立。这个「一定比例」是多少，他没有给。

这一段能写的就这么多。文档、推文、npm 安装量，是他公开的三样东西；各渠道分别带来多少流量、多少买家，见第 8 段。

4 定价与收入构成

Tailwind UI 的收费方式，据他在 AMA 里自述，是一次性买断，不是订阅。具体售价和档位在这三份来源里都没有出现，本文不写。想看买断和订阅各自怎么选的，可以对照一次性买断还是订阅制那篇里的六个产品。

收入分三层看。

第一层是 Tailwind UI 本身。2020 年 2 月 26 日早期访问上线。截至 2020 年 8 月 2 日，据 Adam Wathan 在其博客自述，累计营收约 200 万美元，他当时的说法是快要跨过这条线了。从上线到这个时点大约 5 个月，平均下来每个月约 40 万美元，这是本文的折算，不是他的原话，而且早期访问上线那段时间的销售节奏和后来是否一样，来源里没有写。到了 2022 年 9 月，据他在 Indie Hackers AMA 自述，Tailwind UI 的年营收是七位数美元，并且还在增长，具体数字没有给。

第二层是《Refactoring UI》这本书。它出版于 2018 年 12 月。截至 2020 年 12 月 29 日，据 Adam Wathan 在其博客自述，这本书 2020 年全年的年营收约 60 万美元。截至 2022 年 9 月，据他在 Indie Hackers AMA 自述，这本书的累计营收超过 250 万美元，出版近四年之后仍然卖得好。

这里有一个值得单独看的点：出版两年后的 2020 年，它仍卖了约 60 万美元；到 2022 年 9 月（出版近四年）累计超过 250 万美元。一本 2018 年底出的书，到这个时点还在卖，说明它不是只靠发售那一波。这本书和 Tailwind CSS 之间是什么关系、有多少买家是从框架用户转化过来的，来源里没有拆。

第三层是更早的书和课，也就是第 2 段说的 2016 年那本书、Laravel 测试课和 Vue 进阶课。这三样东西的数字是他在 AMA 里给的，时间跨度是 2016 年到 2018 年。它们是 Tailwind UI 上线之前的收入来源，不算在 Tailwind 这盘账里。这段时间他公开的收入只有这几样。

把三层放到一起，顺序是：书和课先养人，框架免费攒用户，付费模板最后接上。每一层都有他本人给的数字，但三层之间的转化关系，他一句都没写。

5 转折与踩坑

这个案例的转折点只有一个，就是从「框架免费、靠别的赚钱」变成「框架之上有一个付费层」。这个转折在时间上对应 2020 年 2 月 26 日 Tailwind UI 上线，在钱上对应《Refactoring UI》提供的那笔本钱。这两件事他都写了，但从决定做付费产品到真正上线中间发生了什么，来源里没有。

踩坑这一节要老实说：这三份来源里，他没有写过任何一次翻车、走弯路或者差点做不下去的事。唯一带点情绪的表述，是第 2 段转述的那句：不下功夫推过那道坎，他会难受。所以本文写不出踩坑，也不打算编一个出来。

能写的是团队。据他在博客自述，到 2020 年 8 月，团队里除了他和合伙人 Steve Schoger，还有 Brad Cornes、Simon Vrachliotis，以及一位没有署名的开发者。据他在 AMA 里自述，到 2022 年 9 月，团队是 7 个人。从 5 个人左右到 7 个人，两年只多了两个，这个规模对应的是年营收七位数的付费产品加一本累计 250 万美元的书。人数是他给的，每个人负责什么，他没说。

6 时间线

日期	事件	当时收入
2016	第一本书发售	首周 61,392 美元
2017-11-01	Tailwind CSS v0.1.0 发布	免费开源，无付费层
2018	Vue 进阶课程	累计约 30 万美元
2018-12	《Refactoring UI》出版	提供全职做 Tailwind 的本钱，数字未给
2019-05-13	Tailwind CSS v1.0	—
2020-02-26	Tailwind UI 早期访问上线	—
2020-08-02	博客复盘	Tailwind UI 累计约 200 万美元；npm 累计安装 1,000 万
2020 全年		《Refactoring UI》年营收约 60 万美元
2022-09	Indie Hackers AMA	《Refactoring UI》累计 250 万美元以上；Tailwind UI 年营收七位数；团队 7 人

上面的数字分别出自他本人博客的两篇文章和一次 AMA。Laravel 测试课累计超过 100 万美元这一条没有具体日期，没放进表里。

7 可照抄清单

• 在公开场合边做边讲，让产品从别人的追问里长出来：Tailwind CSS 的起点是他直播做 KiteTail 时观众追问 CSS 写法，不是先立项再做（见第 2 段）。
• 先用书和课攒本钱，再全职做免费的东西：框架开源两年多没有付费层，这期间他公开的收入是 2016 年的书、两门课和 2018 年底的《Refactoring UI》（见第 2 段、第 4 段）。
• 把文档当营销来做：他自己说文档就是营销，不是收尾工作（见第 3 段）。
• 一条推文可以花两周：有些推文背后是两周接近全职的投入（见第 3 段）。
• 付费层放在免费框架之上，不动免费层：免费框架造用户池，付费模板只需要其中一部分人买单（见第 3 段、第 4 段）。
• 付费模板用一次性买断：Tailwind UI 不做订阅（见第 4 段）。
• 旧产品不下架，一直卖：《Refactoring UI》出版两年后的 2020 年仍卖了约 60 万美元，出版近四年累计过 250 万美元（见第 4 段）。
• 团队保持小规模：2020 年 8 月 5 人左右，2022 年 9 月 7 人（见第 5 段）。

8 出处未公开的部分

• Tailwind UI 的售价与档位，三份来源都没有给。
• 《Refactoring UI》的售价，以及它发售第一周的数字，没有公开。
• 各渠道的流量占比，也就是文档、推文、npm 之外还有哪些渠道、各自带来多少人，没有拆分。
• Tailwind UI 的第一批买家有多少来自框架用户、多少来自书的读者、多少来自他此前的课程学员，没有拆分。
• 2021 年之后 Tailwind UI 的逐年数字，2022 年 9 月只说了年营收七位数，没有具体数。
• 《Refactoring UI》给全职做 Tailwind 提供的本钱具体是多少，博客只说是一大笔。
• Tailwind UI 早期访问上线时有多少组件、上线首周和首月卖了多少，没有写。
• 为什么选一次性买断而不是订阅，他只说了结论，没说原因。
• 团队里每个人负责什么、合伙人之间怎么分成，没有写。
• 做 Tailwind 的过程中有没有走过弯路、差点放弃过，这三份来源里没有任何这类内容。
• 2022 年 9 月之后的情况不在本文引用的来源里，本文不写。

库里的相关记录

• Tailwind UI：本站产品库里的记录
• 案例复盘库：本站所有单产品复盘
• 把开源当获客渠道：Plausible、Ghost、Tailwind 三种不同的开源变现结构
• 一次性买断还是订阅制：六个公开收入产品的选择
• 独立开发者的获客渠道：库里按渠道归类的清单