Tailwind CSS：从副业到数百万美元的生意
今天带来的是Tailwind CSS创始人Adam Wathan的创业故事。
今天带来Tailwind CSS创始人的一篇文章，他在这篇文章里面介绍了Tailwind CSS是怎么从一个副业项目变成价值数百万美元的生意。
原文
点击原文阅读直达原文
一个多月前，Tailwind的总安装量突破了1000万，鉴于其简陋的开始，真让我震惊。
我们还即将从Tailwind UI项目中获得200万美元的收入，Tailwind UI是我们的第一个Tailwind CSS商业化产品，大约在5个月前发布，距Tailwind CSS首次发布不到两年。
这是一个从头开始的故事，趁它还仍然新鲜到足以让人记忆犹新的时候……
Reddit遇见Pinterest，遇见Twitter
早在2015年，我就告诉我现在的生意伙伴Steve Schoger，我有一个副业的想法，就是建立一个网站，让公司可以和他们的团队分享一些有趣的链接，外界也可以订阅，查看他们正在阅读关注什么。
我们叫它“Digest”。
我们对此非常兴奋，我决定请假一周以建立最初的原型。但是，以经典的开发方式，我花了整整一周的时间对技术栈做决策，最后只花了一整天的时候来做真正的功能。
其中一个决定是如何处理CSS。我一直是Bootstrap的忠实粉丝，但第一款Bootstrap 4 alpha刚问世，他们放弃了Less for Sass。我讨厌Sass！
Sass在2010年代中期的预处理程序大战中击败了Less，但我认为Less是更好的语言。它具有函数式和声明式，而不像Sass那样具有程序性和命令式，它具有Sass所没有的一项杀手锏功能：作为 mixins 的类。
在Less中，任何现有的类都可以自动被用作mixin。你不需要像在Sass中那样显式定义mixin。这让你可以轻松地从较小的实用工具类中创建较大的类抽象。
如果你在Tailwind中使用过@apply，这可能看起来很熟悉……
所以不管怎么说，回到Digest。通常我会用Bootstrap，但是Sass的事情让我死心了。我想继续使用Less。所以我唯一的选择是从头开始编写所有样式。
我花了一周的大部分时间在这个最初的样式系统上。
我正在构建的是一个非常受Bootstrap启发的系统，它有很多组件类，比如btn、card-list和radio-box。但它也有一套小的实用类。
顺便说一下，这就是我们结束的地方，我认为即使在5年后的今天，它仍然很好看！
总之，我们忙于其他项目，对这个想法失去了热情，最终一切都落在了副业墓地（就像大多数事情一样）。
除了样式表以外的所有内容。
在每个新项目中，我一直在复制和粘贴Digest中的所有Less文件，并以它们为起点，根据需要对它们进行定制，以适应我正在构建的任何新设计。在我们放弃Digest之后，我将它们带到了至少4，5个其他项目中。
在复制样式时，我注意到了一些东西：这些实用程序（起初是简单的padding和margin实用程序）一直在不断地增长和发展，涵盖了越来越多的CSS功能，而组件文件却越来越短。实用工具是唯一真正“可移植”的东西，而组件样式始终过于自以为是，无法在其他设计上重用。
这时，我才真正开始将整个“实用工具优先”作为一种架构理念，而不是将实用工具仅仅看作是一个有用的技巧包，以便可以根据需要在我的HTML中随处使用。
废弃的副业2
几年后，我和Steve开始着手开发KiteTail，这将是一个以开发者为中心的、由webhook驱动的结账平台。
当时我们非常认真地对待这一问题，并且以那些旧的Digest样式为起点，我开始构建它，并尽力使这些样式风格尽可能“项目无关”。
您可以在YouTube上看我构建了大量应用，并且可以看到所有这些实用程序样式在里面一直存在。
在YouTube上观看“ Building KiteTail”系列
现在在这一点上，我完全没有打算维护任何形式的开源CSS框架的。我甚至没有想到，我一直在建造的东西会让人感兴趣。但是，源源不断的人们总是在问CSS的情况：
这就是在公共场合工作的好处，如果不是我在直播我在另一个被放弃的项目上的工作，Steve和我永远不会建立起Tailwind Labs 的业务（现在已经在两年内实现了超过400万美元的收入）。
无论如何，最终我想“也许我会把这个小小的Less框架开源？”
开源
** **
大约这段时间，一些人与我联系，希望能以任何方式与我合作。其中一个人就是Stefan Bauer，如果我没记错的话，是他建议Tailwind的响应式工具使用sm:font-bold这样的前缀，而不是sm-font-bold。
我的好朋友Jonathan Reinink也在这个时候给我发了关于这个框架的消息，并说他将重新设计他的SaaS项目，并想尝试我这个疯狂吹嘘的的实用工具。
事实证明，这是让使框架真正好起来的关键，因为我们的项目具有完全不同的设计，而会成为Tailwind的东西需要支持这两个项目。这是一个很好的强制功能，使它与项目无关。
顺便说一下，为什么叫Tailwind？这是因为我希望这个名字能以某种方式与KiteTail联系起来，因为Steve和我还在努力推动这个想法，并梦想着有一天它能成为我们经营的这个很棒的公司。我只是在onelook.com上输入了 “tail/*“，看看能不能找到相关的酷词。
回到故事中来—这大概是在2017年6、7月份的时候，在接下来的2-3个月里，我和Jonathan热火朝天地做着开源的东西。
在这个过程中，我面临的挑战之一是为了让Tailwind能够如我所愿地进行配置，我不得不认真地挑战Less的可能边界，并写出一些真正神秘而可怕的狗屎。
为这种事情写一个测试套件在我看来并不实用，而且已经到了我连系统都不懂的地步了，只能希望和祈祷解决一个问题不要引入另一个问题。
这大概是8月中旬的时候，我的朋友David Hemphill建议我用PostCSS搞搞看，看看能不能用JS写出框架。
我不知道使用PostCSS来构建像Tailwind这样的东西是什么意思（我以为它仅限于自动拼接器使用的那种东西），但是David告诉我一些高级的技巧，比如使用自定义at-rules和自定义属性作为 “钩子 “来插入生成的代码。
我开始使用它，并立即被我对代码的信心以及给我一个合适的编程语言所能做的惊人事情所惊呆。
几周后，我在Full Stack Radio上谈到了这一切。
在Full Stack Radio上收听 “用PostCSS构建一个CSS框架”
(顺便说一下，直到今天我都觉得Tailwind完全是在滥用PostCSS，而这是它从来没有想过的，我暗自相信Andrey Sitnik每次想到我们对他美丽的库所做的事情，都会感到有点畏惧😅)
总之，在2017年的万圣节之夜，我们正在对第一个版本进行最后的整理，并对最初的文档进行了釜底抽薪。
我们发布了它，并获得了很多积极的关注，即使对于v0.1.0：
几天后，Andrew Del Prete写了一篇框架历史上最重要的博客文章，把我介绍给了PurgeCSS的奇妙世界。
阅读 “使用PurifyCSS PurgeCSS删除未使用的Tailwind CSS类”
经过大约一年的新版本v0.x的发布，有很多很酷的新功能和不断增长的社区，我宣布我将全职在Tailwind CSS上工作。
全职做Tailwind CSS
我本来是要和朋友一起开始一个新的SaaS项目的，但是在《Refactoring UI》（我和Steve在2018年12月发布的一本书）的成功和Tailwind的成长之后，我知道我会后悔没有进一步推动它。
Tailwind CSS是迄今为止我工作过的影响最大的项目—感觉它离我的 “凹凸不平 “就差这么一点了，而没有投入工作把它推过这个坎的想法让我觉得恶心。
我很幸运地从Refactoring UI那里得到了一大笔资金，而且我知道有很多方法可以围绕这个框架本身建立商业产品（主题、UI套件、课程什么的！），所以我决定去做。
我破天荒地清理了一些东西，并应用我们所学到的东西来整理一个合适的v1.0版本，该版本于2019年5月13日推出。
在那之后，Steve和我花了一年的时间，试图找出 “Tailwind 业务 “到底要做什么。我们抛弃了大量不同的想法，但最终决定聚焦在现在的Tailwind UI。
这是2019年3月时，这个想法的第一眼。
我们在Tailwind UI上孜孜不倦地工作了几个月，在自定的最后期限前连续工作了36个小时后，终于在2020年2月推出了我们的早期访问版本。
它的成功超出了我们最疯狂的设想（下周收入将突破200万美元），因此，我们已经能够开始建立一个惊人的团队（Brad Cornes，Simon Vrachliotis和神秘的3号开发者），不断推动Tailwind的未来。
从这里开始，事情只会变得更加不可思议，我迫不及待地想把我们脑海中的一些想法变成新的功能，产品和工具，使Tailwind的体验在未来几年变得更好。
谢谢你对我们的支持❤️。
往期回顾：
