我爱风

Tailwind是一个原子级CSS框架，席卷了前端世界。它使对设计没有深入了解的开发人员能够构建视觉上华丽的现代用户界面。

如果您以前从未看过它，请参阅原始网站上的规范Tailwind示例：

许多人认为Tailwind很酷，因为它使用原子CSS。事情是这样的：尽管使用了原子CSS，但Tailwind还是很棒的，并不是因为它。

我们拥有原子CSS框架已有近十年了，但是没有一个像Tailwind那样广受好评。是什么使它与众不同？

Tailwind流行的关键是在框架的核心上精心构建的设计令牌系统。系统精心选择的约束条件为开发人员提供了正确的防护栏。通过仅提供离散的步骤，它们使选择的好坏显而易见。

这确实需要一定的设计品味，但是我认识的大多数前端工程师已经在构建用户界面的多年中发展了这一点。借助Tailwind的系统，他们无需大量的设计技能就可以将这种品味变成现实，这有助于他们跨越鸿沟。

尾风系统是设计的杰作。我和世界各地的许多其他开发人员感到被它赋予了力量并喜欢它。

原子CSS框架基本上是一种交付机制，允许开发人员将系统应用于其UI。不可否认的是，它具有出色的开发人员体验：一旦习惯了自定义词汇，您就会感觉自己像在飞翔！

用户仍然必须为他们不可避免地需要的自定义CSS添加单独的设置（硬币化＆＃34; bailwind＆＃34;）。在现实世界中，您不能仅仅依靠“风向标”。在同一系统中没有专用于定制样式的地方会导致维护问题。

出于文件大小的考虑，默认情况下，Tailwind不包括所有实用程序的所有变体（例如，hover：，sm :）。它由您自己手动配置每个CSS属性所需的属性。

原子CSS并非理想的性能。没有工具可以提取每页关键的CSS，因此最终将不必要的CSS交付给浏览器。该应用越大，越动态，您将交付的不必要的代码越多。 1个

最初的原子CSS库之一的创建者布伦特·杰克逊（Brent Jackson）在有关原子CSS的帖子中说得最好：

“这种方法是在React发布之前创建的，旨在用于基于模板的用户界面，包括Rails和PHP。它从来没有为基于功能组件的UI设计，也没有利用这种新范例。”

现在，事情来了：您可以吃蛋糕也可以吃。您可以使用Tailwind的出色系统和出色的开发人员体验，而无需使用原子CSS的缺点。

导入＆＃34; twin.macro＆＃34; const Card =（）=＆gt; （Erin Lindford客户支持[email protected]（555）765-4321）

毫不奇怪，结果看起来是相同的-毕竟我们仍在使用相同的系统。甚至代码看起来都一样，除了我们使用tw prop而不是class属性！

但是，在幕后，这会自动将类名编译为它们所引用的实际CSS（使用css prop）：

导入＆＃34; twin.macro＆＃34; //↓↓↓↓↓变成↓↓↓↓↓导入＆＃34; styled-components / macro＆＃34;

您可以利用Tailwind的系统和开发人员的经验，并充分利用CSS-in-JS的所有优点：

使用自定义样式扩展元素就像使用css prop一样简单，＆bailwind＆＃34;不需要额外的单独设置：

您可以将所有变体与所有实用程序结合使用，从而在系统中实现更多表达。由于twin.macro在构建时运行，因此您不必担心配置或文件大小：

您将获得全自动的关键CSS提取和代码拆分。用户将只为他们请求的页面加载所需的样式，仅此而已！ CSS性能不会变好。 1个

课程：使用twin.macro来利用Tailwind的出色系统和开发人员经验，而不会带来原子CSS的缺点。

与其在Tailwind的系统上前进两步，在原子CSS上后退一步，不如在前进五步。一起。

CSS-in-JS自动为请求的页面提取关键CSS并将其内联为＆lt; style＆gt;标签。这意味着使用CSS-in-JS的初次绘制将始终更快，因为它既可以保存对.css文件的额外网络请求，又可以减少向客户端发送的CSS代码。尽管小型应用的互动时间会稍慢一些（因为JavaScript捆绑包中包含您使用的CSS-in-JS库），但随着应用的增长，网络对较大CSS文件的请求可能会超过任何CSS-in-JS库，也会导致互动时间变慢。 ↩

成为第一个知道我何时发布新内容的人！关于React.js，Node.js，启动公司和其他有趣事物的坦率想法。