Tailwind CSS: 从副产品到数百万美元业务

从一个小项目到数百万美元业务的成功故事

作者：Adam Wathan

发布日期：2020年8月2日

阅读时间：大约5分钟

分类：CSS, 前端开发, Web开发

本文最初作为Twitter上的一个线程发布，但我认为在这里重新发布会更合适。

大约一个月前，Tailwind的总安装量突破了1000万次，这对于它的不起眼的起步来说，完全让我震惊。

我们即将突破200万美元的收入，这是我们发布的第一个商业Tailwind CSS产品Tailwind UI带来的收入，该产品发布至今大约5个月，距离第一次Tailwind CSS发布不到两年。

故事的开始

早在2015年，我告诉现在的商业伙伴Steve Schoger我有一个关于一个网站的想法，公司可以在上面分享有趣的链接，外部人员可以订阅以查看他们敬仰的团队在阅读什么。

我们称之为“Digest”。

我们对此感到非常兴奋，我决定请假一周来构建初始原型。但典型的开发者风格，我花了一整周时间在技术栈的选择上，最后可能只剩一天时间来实际编写功能。

其中一个决定是关于CSS的。我一直是Bootstrap的忠实粉丝，但Bootstrap 4的第一个alpha版本刚刚发布，他们把Less换成了Sass。我讨厌Sass!

Sass在2010年代中期的预处理器大战中打败了Less，但在我看来Less是一种更好的语言。它是函数式和声明式的，而不是像Sass那样过程式和命令式的，它还有一个Sass没有的杀手级功能：类作为mixin。

在Less中，任何现有的类都可以自动用作mixin。你不需要像在Sass中那样显式定义mixin。这让你可以轻松地从较小的实用类中创建更大的类抽象。

如果你用过Tailwind中的@apply，这看起来会很熟悉…

回到Digest。通常我会使用Bootstrap，但Sass的事情让我打消了这个念头。我想继续使用Less。因此，我唯一的选择是从头开始编写所有样式。

我花了一周时间在这个初始样式系统上。

我构建的是非常Bootstrap风格的东西，有很多组件类，如btn、card-list和radio-box。但它也有一小套实用类。

（顺便说一下，这就是我们最终的结果，我认为即使过了5年，它看起来仍然不错！）

开源之路

几个月后，我想“也许我应该开源这个小Less框架？”

几个人在这段时间联系了我，看看他们是否可以在任何方面与我合作。其中一个人是Stefan Bauer，我记得是他建议使用前缀如sm:font-bold而不是sm-font-bold来表示Tailwind的响应式实用工具。

我的好朋友Jonathan Reinink也在这段时间联系了我，说他即将对他的SaaS项目进行大规模的重新设计，并想尝试我一直在喋喋不休的实用工具这套疯狂想法。

这对使框架真正变得出色非常关键，因为我们的项目有完全不同的设计，而Tailwind需要支持这两个项目。这是一个使其项目无关化的绝佳强制功能。

名字Tailwind？它来自于我想要将名字与KiteTail联系在一起，因为Steve和我仍在努力推进这个想法，并梦想有一天能经营这家公司。我只是把“tail*”输入onelook.com看看是否能找到任何相关的酷词。

大约在2017年6/7月，Jonathan和我拼命工作了2-3个月，试图制作出足够好的东西以便开源。

我在这个过程中面临的挑战之一是，为了使Tailwind如我所愿般可配置，我不得不严重推动Less的边界，编写一些真正晦涩难懂的代码：

编写这种东西的测试套件几乎是不现实的，我只能希望解决一个问题不会引入另一个问题。

这可能是8月中旬，我的朋友David Hemphill建议我尝试使用PostCSS看看是否能用JS编写框架。

我开始研究它，并立即被我对代码的信心以及用合适的编程语言能做的惊人事情所震撼。

我在几周后在Full Stack Radio上详细谈到了这一点：

在2017年万圣节夜晚，我们完成了第一个版本的最后润色，并加班加点地完善了初始文档：

我们推出了它，并得到了大量的积极关注，即使是v0.1.0：

几天后，Andrew Del Prete写了历史上最重要的博客文章之一，向我介绍了美妙的PurgeCSS世界。

经过大约一年的新v0.x版本发布，带来了许多很酷的新功能和不断增长的社区，我宣布我要全职投入Tailwind CSS。

Tailwind CSS是我迄今为止影响力最大的项目，它感觉就像是我“在宇宙中的一大步”，不努力推动它进一步发展让我感到恶心。

我有幸拥有Refactoring UI的资金支持，我知道围绕框架本身构建商业产品（主题、UI工具包、课程等）是有可能的，所以我决定全力以赴。

我努力清理并应用我们学到的东西，准备了一个正式的v1.0版本，于2019年5月13日发布：

此后，Steve和我在接下来的时间里努力思考“Tailwind业务”到底是什么。我们原型化并放弃了许多不同的想法，但最终决定追求现在的Tailwind UI。

2020年2月，我们终于在自设的最后期限前整整工作了36小时，推出了早期访问版本。

它超出了我们最疯狂的梦想（下周收入将超过200万美元），因此我们得以开始建立一支优秀的团队，以继续推动Tailwind的未来。

从这里开始，事情只会变得更加令人难以置信，我迫不及待地想将一些滚动在我们脑海中的想法转化为新功能、产品和工具，以在未来几年内使Tailwind体验变得更好。

感谢您的支持❤️