初探Tailwind CSS
初探Tailwind CSS
写CSS有些年头了，经历了不同的时期用不同的姿势来编写CSS，其目的就是给Web元素添加样式。但编写样式着实令人感到烦恼，甚至是效率低下，成本极高。也正因如此，社区中有很多CSS方法论和框架来帮助开发快速有效编写CSS。虽然这些方法论和框架有助于我们快速编写CSS，构建UI组件，但也有令人感到头痛之处，比如冗余的代码，代码的覆盖等。随着功能第一（Utility-First）CSS的出现，让我看到了编写CSS的另一种有效的方式，该方式也被认为是现代Web中构建Web界面最好的选择。其中Utility-First CSS的典型作品之一就是Tailwind CSS。接下来，我们就来了探讨Tailwind CSS，我们将了解基于组件的样式有哪些问题，以及为什么要基于Utility-First CSS来构建组件。
编写CSS的姿势
时至今日，编写CSS有很多方式，也可以基于一些CSS框架来编写。比如2019年CSS状态报告中也有相关的统计:
或许你在项目中已经用了一些CSS方法论，比如BEM、Atomic CSS、OOCSS、SMACSS和ITCSS等，也体验过了在项目中引用社区中优秀的CSS框架，比如大家熟悉的Bootstrap、Foundation等。
随着一些优秀的JavaScript框架（比如，React和Vue）等出现，我们构建Web的方式也变了，也致使我们编写CSS的方式也不同了，社区中有很多关于CSS-in-JS的讨论，同样也有不同的方式方法：
如果你面对众多的编写CSS的姿势和管理维护方式感到困惑的话，建议你可以按照下图的流程来做选择：
有关于这方面的讨论，这里就不做过多的阐述了，如果你感兴趣的话，可以阅读：
- 写CSS的姿势
- React中编写CSS的姿势
虽然这些CSS方法都在试图着帮助我们解决CSS编写和管理的问题，但是如果我们能够编写实用程序类（Utility Class），然后在我们的代码库中重复使用它们，就会更容易一些。这些实用工具类是详尽的，可以作为padding、margin、font-size等方面的独立指南。
另外实用程序类（Utility Class）将解决重复样式的问题，因为我们不再需要编写任何自定义样式。此外，如果我们的UI风格遵循特定的标准，我们也可以在开发中遵循相同的标准。其中Tailwind CSS就是社区中目前具备这些特点的CSS框架之一。是不是对Tailwind CSS感到好奇，如果是的话，请继续往下阅读。
什么是Tailwind CSS？
Tailwind CSS官网是这么描述的：
换句话说，Tailwind CSS是一个基于实用程序的底层CSS框架，旨在简化Web应用程序的构建，提高事度，减少编写定制CSS的关注，而不需要离开HTML代码的舒适区，同时实现出色的界面。
比如官网首页提供的示例，只需要使用几个类就可以设计出不同的卡片效果（不需要总是声明一个大的类来独立于你的HTML和写一堆属性来制作一些东西）：
<div class="md:flex bg-white rounded-lg p-6">
<img class="h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6" src="avatar.jpg">
<div class="text-center md:text-left">
<h2 class="text-lg">Erin Lindford</h2>
<div class="text-purple-500">Customer Support</div>
<div class="text-gray-600">erinlindford@example.com</div>
<div class="text-gray-600">(555) 765-4321</div>
</div>
</div>
而且只需要改变HTML中的类名，就可以达到不同的效果：
其他CSS框架（比如我们熟悉的Bootstrap、Foundation、Bulma等）提供了各种预定义组件（比如Modal、Button、Alert和Card等）。但是有了Tailwind CSS，可以自己做，或者你被迫根据你的项目模型自己做。换句话说，你实际上拥有了组件，你可以在你选择的任何组件上利用你的定制能力。这意味着不再需要与框架斗争，也不需要试图找出需要覆盖哪些类才能获得最初目标的结果。
Tailwind CSS不像Bootstrap
当你看到CSS框架一词时，我想你马上会想到Twitter的 Bootstrap （或类似于Bootstrap的CSS框架）。但它们之间还是存在很大的差异的，其中最大的差异就是：Bootstrap是一组可设定样式笔主题的组件，Tailwind 是一组可配置的实用CSS类；Bootstrap帮助你预构建组件，Tailwind为你提供了快速构建自己组件。
用一个按钮的示例来展示他们之间的区别。
先来看HTML代码：
<!-- Bootstrap -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Tailwind -->
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-2 rounded">Primary</button>
可以看到，在Bootstrap中，HTML要简洁的多，所以你可能会问，既然Bootstrap更简单，为什么不使用它呢？为了回答这个问题，我们来设想有这么一个场景：“如果你想让按钮在特定的页面（或组件）上稍微小一点”？你是否想要为这种独特的情况创建一个新的类，比如Bootstrap中的.btn-sm。在这种情况下，在Tailwind CSS中只需要使用不同的padding类，比如py-1。相比之下要比Bootstrap容易地多，而且你不需要去修改或增加任何CSS代码，而只需要调整HTML中class的值。
而且在Tailwind CSS中和Bootstrap（或类似于Bootstrap的其他CSS框架）最大的不同，在class中可以设置一些状态的类，比如hover:bg-blue-600。这在Bootstrap中从未有过的特性和功能。
另外，在Tailwind CSS中也提供了创建类的可能性，比如在HTML文件中重复多次使用的组，以为该组件创建一个类，比如.btn-blue。那么在Tailwind CSS中可以像下在这样使用：
<!-- Extracting component classes: -->
<button class="btn btn-blue">Button</button>
<style>
.btn {
@apply font-bold py-2 px-4 rounded;
}
.btn-blue {
@apply bg-blue-500 text-white;
}
.btn-blue:hover {
@apply bg-blue-700;
}
</style>
有关于这方面的具体使用，后续会花更多的时间来和大家一起探讨。
接下来，我们再来看一下Bootstrap和Tailwind CSS两个框架中CSS的差异性。同样拿上面的按钮Demo为例：
我想你在上面的截图中已经看出他们之间的差异了：Bootstrap中类的样式是一个集合（会有一个或多个样式）；而Tailwind CSS中的每个类对应的仅是一个样式。
Tailwind CSS不像 Atomic Design
Tailwind CSS也不像 Atomic Design。了解Atomic Design的同学都知道，在Atomic Design系统中，可以将元素划分为最小单元体，将其称为元子，这些元子可以组合成最终的页面。
但Tailwind CSS的类特别像Atomic Design中的 Atoms。前面的示例可以获知，在元素上运用很多个不同类就能达到想要的UI，甚至是页面的效果。但在Tailwind CSS中这些类不被称为是Atoms 类，而是被称为实用性类（Utility Class）。
Tailwind CSS不像 OOCSS
Tailwind CSS也不像OOCSS（Objec
剩余80%内容付费后可查看 本部分为付费内容，支付后可查看 支付3.99元 已支付？输入手机号查看 包月会员登录 购买包月会员推荐