档案库 · 产品创意 · 产品决策 · 2015–2020
Tailwind CSS:一个死掉的业余项目的遗留样式如何变成400万美元的生意
他在各类失败项目中反复复制的工具类,成了一个免费CSS框架;付费组件库五个月收入超过200万美元。
Tailwind Labs
当时的题目
In 2015 Adam Wathan spent a week building a side project called Digest; when Bootstrap 4 dropped the Less preprocessor he preferred, he hand-wrote its styles from scratch. The project died, but he kept copying those stylesheets into later projects and noticed the same pattern each time.
它是怎么成立的
Adam Wathan的故事始于2015年的Digest度假项目,这个项目让人们可以与团队分享链接。他花了一周假期去开发,大部分时间用来选技术栈,并手写了所有CSS,因为Bootstrap 4的测试版从Less(他喜欢的预处理器)转向了Sass。Digest混合了Bootstrap式的组件类(比如btn、card-list)和一小套用于内边距、外边距的工具类。
Digest被扔进副业墓地,但它的样式表幸存了下来。Wathan把Less文件复制到了至少四五个后续项目中,每次工具类都增多,覆盖更多CSS特性,而组件文件越来越短。组件总是过于执着于具体场景而无法复用;工具类才是唯一真正可移植的部分。这就让“工具类优先”从一堆技巧变成了架构思想。
这个想法在另一个项目KiteTail上成熟,Wathan和Schoger认真对待。Wathan直播了开发过程,观众总问CSS的事,合作者也打磨了细节:Stefan Bauer提议前缀响应式,Jonathan Reinink用它重新设计了一个风格不同的SaaS——这迫使框架保持通用,David Hemphill建议用JavaScript和PostCSS而不是Less来写框架。v0.1.0于2017年万圣节夜开源发布。
在免费发布了一年、积累社区后,Wathan全职投入,部分靠他和Schoger之前卖Refactoring UI书的收入,并于2019年5月发布了v1.0。Tailwind UI,包含数百个预构建响应式设计的组件库,于2020年2月上线。五个月内,其收入接近200万美元,驱动Tailwind Labs在两年内总营收超过400万美元——Wathan认为这得益于在废弃的副业上进行公共开发。
妙在哪
- 失败的项目留下了可测量的证据:每次复制样式表,工具类都在变多,而组件类在减少,所以可移植性主张来自实践而非观点。
- 公开工作模式提前招募了用户:直播观众不断要求要CSS,采纳者提供了前缀命名方案,而另一个不同设计的项目迫使实现通用化。
- 开源发布免费建立了分发渠道:v0.1.0的关注度和后续一年的更新创造了需求,之后的商业产品得以收割。
- 付费层级完善了哲学:组件才是最定制化、从不转移到部分,所以出售预建组件恰好填补了免费框架留下的空白。
做出来什么
By mid-2020 Tailwind had passed 10 million total installs, Tailwind UI was about to cross $2 million in revenue roughly five months after launch, and Wathan put the whole Tailwind Labs business at over $4 million in under two years. The August 2020 origin story drew 308 points and 109 comments on Hacker News.
可以借走的
反复被复制的那部分就是产品:观察哪些东西能跨项目复用,将核心免费提供,并对每个人都需要的上层部分收费。
后来
Wathan将项目起源发成推特帖,并于2020年8月2日转发,同日登上Hacker News首页,获得308分和109条评论;帖子里一位顾客说他刚买了Tailwind UI的团队授权。Wathan正组建小团队,继续开发框架和付费产品。故事到此:安装量过千万,五个月的产品逼近200万美元收入,一个两人工作室把废弃副业的副产品变成了公司。
资料来源
- Tailwind CSS: From Side-Project Byproduct to Multi-Million Dollar Business
- Tailwind CSS: From side-project byproduct to multi-million dollar business (Hacker News discussion)
发现哪里写错了?告诉我们。
轮到你了
你刚读完一个点子。把你手上的题目说出来,看看谁接过同样的题。
免费账号 · 3 次免费提问 · 不用绑卡