顺风CSS:从副产品到数百万美元的业务

2020-08-03 09:49:01

这篇文章最初是作为Twitter上的一条帖子发布的,但我想我应该在这里重新发布它,让它有一个合适的家。

所以大约一个月前,Tailwind总共破解了1000万台安装量,尽管它的开始并不起眼,但这完全让我震惊。

我们还将从Tailwind UI获得200万美元的收入,这是我们的第一个商业Tailwind CSS产品,大约在5个月前发布-距离第一个Tailwind CSS发布不到两年。

下面是故事的开头,趁它还很新鲜,还能记住…。

早在2015年,我就告诉我现在的商业伙伴史蒂夫·舒格(Steve Schoger),我有一个副项目想法,想要一个网站,公司可以与他们的团队分享有趣的链接,外部人士可以订阅,看看他们钦佩哪些团队在阅读。

我们对此非常兴奋,我决定请假一周来建造最初的原型。不过,以经典的开发者方式,我花了整整一周的时间来做关于技术堆栈的决定,最后可能有一整天的时间来真正地破解真正的功能。

其中一个决定是如何处理CSS。我一直是Bootstrap的铁杆粉丝,但是第一个Bootstrap 4alpha刚刚问世,他们为萨斯丢的钱更少。我恨萨斯!

在2010年代中期的预处理器大战中,Sass在某种程度上击败了它,但在我看来,Less是更好的语言。它是函数性和声明性的,而不是像Sass那样的过程性和命令性,而且它有一个Sass没有的杀手级特性:作为混合的类。

您可以看到,在LESS中,任何现有的类都可以自动用作混合。您不需要像在Sass中那样显式定义Mixin。这使您可以轻松地从较小的实用程序类创建较大的类抽象。

所以不管怎样,回到“文摘”。通常我会使用Bootstrap,但是Sass的事情毁了我的工作。我想继续少用。所以当然,我唯一的选择就是从头开始创作所有的风格。

我正在构建的是非常受Bootstrap启发的,并且有很多组件类,如BTN、Card-List和Radio-Box。但它也有一组很小的实用程序类。

(顺便说一句,这就是我们结束的地方,我认为即使在5年后,它看起来仍然相当不错!)。

无论如何,我们忙于其他项目,对这个想法失去了热情,最终都落到了副项目的坟墓里(就像大多数事情一样)。

在每个新项目中,我不断地从Digest复制和粘贴更少的文件,并将它们作为起点,根据需要对它们进行自定义,以适应我正在构建的任何新设计。在我们放弃“文摘”之后,我肯定把他们带到了至少4到5个其他项目中。

当我复制样式时,我注意到一些东西:实用程序(最初是简单的填充和页边距实用程序)不断增长和发展,涵盖越来越多的CSS功能,而组件文件也越来越短。实用程序是唯一真正“可移植”的东西,而组件样式总是太固执己见,不能在另一种设计上重用。

这就是我真正开始将整个“实用程序优先”的事情确定为一种架构哲学的时候,而不是将实用程序看作是一个有用的小把戏,可以随时随地根据需要在我的HTML上打耳光。

快进到几年后,史蒂夫和我开始开发KiteTail,这将是一个面向开发人员的、WebHook驱动的结账平台:

我们当时非常认真地对待这件事,并且-使用旧的Digest样式作为起点-我开始构建它,非常努力地使这些样式尽可能地“与项目无关”。

你可以看到我在YouTube上构建了大量的应用程序,你可以一直在那里看到所有这些实用程序的风格:

现在,在这一点上,我没有维护任何类型的开放源码CSS框架的意图。我甚至没有想到我所建造的东西会让任何人感兴趣。但是一条又一条,人们总是在问关于CSS的问题:

这就是在公共场合工作的好处--如果我没有直播我在另一个被遗弃的副项目上的工作,史蒂夫和我永远不会建立Tailwind Labs业务(该业务在不到两年的时间里已经创造了超过400万美元的收入)。

不管怎样,最终我想“也许我应该把这个少一点的框架开源?”

在今晚观看“真实的谎言”的同时,稍微研究一下@kitetailapp less框架,😋认为我会对此进行足够的完善,以开放源码的🤘🏻pic.twitter.com/3Y7xHgMtac。

-亚当·瓦森(@adamwathan)2017年6月18日

这个时候,有几个人找到我谈这件事,以防他们能以任何方式与我合作。其中一个人是斯特凡·鲍尔(Stefan Bauer),如果我没记错的话,他实际上是为Tailwind的响应性实用程序建议使用sm:font-bold而不是sm-font-bold等前缀的人。

我的好朋友乔纳森·赖因克(Jonathan Reinink)也在这个时候给我发了一条关于框架的消息,说他即将对他的SaaS项目进行一次大的重新设计,并想尝试一下我一直在谈论的疯狂的实用无稽之谈。

事实证明,这是让框架真正好起来的关键,因为我们的项目有完全不同的设计,未来的Tailwind需要支持这两个项目。这是一个很好的强制功能,使其与项目无关。

顺便问一下,你的名字叫“尾风”吗?这是因为我希望这个名字能以某种方式与KiteTail联系在一起,因为史蒂夫和我仍在努力推动这个想法,并梦想着有一天它会成为我们经营的这家了不起的公司。我刚在onelook.com上加了“Tail\*”,看看能不能找到什么很酷的相关词汇。

回到故事-这是在2017年6/7月左右,在接下来的2-3个月里,乔纳森和我狂热地工作,做一些足够好的东西来开源。

在这个过程中我面临的一个挑战是,为了让Tailwind成为我想要的可配置的,我必须认真地挑战用更少的资源实现可能的极限,并编写一些真正神秘和可怕的狗屎:

据我所知,为这类事情编写测试套件并不实际,而且已经到了我甚至不再理解系统的地步,我只能希望并祈祷解决一个问题不会带来另一个问题。

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

我不知道使用PostCSS来构建像Tailwind这样的东西是什么意思(我认为它仅限于autoprefix使用它的那类东西),但是David告诉了我一些高级技巧,比如使用自定义at-Rule和自定义属性作为“钩子”来插入生成的代码。

我开始摆弄它,并立即惊讶于我对代码感到如此自信,以及如果有一种适当的编程语言我可以做的令人惊叹的事情。

(顺便说一句,直到今天,我觉得Tailwind完全是在以一种从未有过的方式滥用PostCSS,我私下相信安德烈·西特尼克每次想到我们对他美丽的图书馆😅所做的事情都会有点畏缩)。

无论如何,在2017年万圣节之夜,我们正在对第一个版本进行最后的润色,并在最初的文档上全力以赴:

我们把它搬了出去,获得了大量的积极关注,即使是在v0.1.0中也是如此:

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

在发布了大约一年的新版本0.x之后,我宣布我将全职使用Tailwind CSS,其中包含了很多很酷的新功能和不断增长的社区。

我本应该和一个朋友一起开始一个新的SaaS项目,但在重构UI(史蒂夫和我在2018年12月出版的一本书)和Tailwind的增长取得成功后,我知道我会后悔没有进一步推进。

顺风CSS是到目前为止我参与过的影响力最大的项目--它感觉就像是我在宇宙中留下的印记,而不投入工作来推动它越过那个驼峰的想法让我恶心。

我很幸运地从重构UI中获得了一大笔资金,我知道有一些方法可以围绕框架本身构建商业产品(主题、UI工具包、课程等等!)。所以我决定试一试。

我拼命清理东西,并应用我们所学到的知识来组装一个合适的1.0版本,该版本于2019年5月13日发布:

🚀超级兴奋地宣布,@tawincss v1.0终于发布了!访问网站,给它一个https://t.co/zCaaNls0zp🤙🏻pic.twitter.com/nkpCN8Bq3q。

-亚当·瓦森(@adamwathan)2019年5月13日。

在那之后,史蒂夫和我在今年剩下的时间里都在埋头苦干,试图弄清楚“尾风业务”到底会是什么样子。我们原创并抛弃了大量不同的想法,但最终决定追求现在的Tailwind UI。

这个周末我一直在和@Steveschoger一起计划一个@Tailwind css组件库/工作室项目的原型我认为成百上千个完全响应的专业设计的组件是预先构建的,这样你就可以复制👀并调整以品尝👌🏻的用处了吗?Pic.twitter.com/WobOoMGwxH。

-亚当·瓦森(@adamwathan)2019年3月30日

我们在Tailwind UI上不知疲倦地工作了几个月,终于在2020年2月发布了我们的早期访问版本,在我们自己设定的最后期限之前连续工作了36个小时。

🥳天哪,尾风UI是现场直播!你需要知道的关于提前访问的一切都可以在新的网站👉🏻上找到(还有很多免费的东西可以预览!)。Https://t.co/CX0wtUgwGC。

-亚当·瓦森(@adamwathan)2020年2月26日。

它取得了超乎我们想象的成功(下周收入将突破200万美元),因此我们能够开始组建一支令人惊叹的团队(布拉德·科恩斯、西蒙·弗拉里奥蒂斯和神秘开发者#3),继续推动Tailwind的未来向前发展。

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