Tailwind CSS

在前端项目中，围绕CSS的框架一直是有意思的话题，各种框架技术总是折腾来折腾去，CSS，SCSS，SASS，Bootstrap，... 这里有一个2024年的CSS框架列表，随便一列都有几十种之多，而且是“Awesome”的：https://github.com/troxler/awesome-css-frameworks。

究其原因，就是CSS这项技术其实并不算简单——至少在可维护性和技术实现上的平衡不是很容易做到——写着写着总感觉会有些别扭。

直到开始尝试Tailwind CSS之后，这一切似乎清晰了起来。

要不要“Semantic” CSS？

你总是需要对样式改来改去，才能实现出满意的效果。 为了让网页变得好看，传统的做法都是为一个div或者其他什么元素设置一个class。 比如，通过一个.text-center的class来让文字居中：

<p class="text-center">
    这篇文章为大家介绍一下Tailwind CSS
</p>

然后，再通过.text-center来实现：

.text-center {
    text-align: center;
}

这再平常不过了。但是有人说，这样不好。你的HTML和样式混杂在一起了。 HTML应该管内容，CSS才管样式。

所以你应该这样写，用.blog-content来表示这是一段博客文字内容。 这样，你的HTML更加语义化，而跟你的CSS隔离开了：

<p class="blog-content">
    这篇文章为大家介绍一下Tailwind CSS
</p>

如果你想调整网页的样式，你只需要更改CSS即可！看吧，简单改了个名字，但效果却大不一样！

但是这种想法实践起来过于理想，它在主要问题是：

• 所谓“样式”跟“结构”是没法完全分开的，布局改变也意味着需要HTML结构改变，这些没法单纯在CSS中实现
• 这种实践起来最终结果大概率是CSS和HTML元素内容一一对应，以至于实际上，写.blog-content其实与.a001并没有太大的区别

一种常见的场景是，同样是博客内容但是在列表和详情页面样式会不一样，但是从“Semantic”的角度来说，它们应该是一样的，比如都叫.blog-content。 这样为了在CSS中区分，就必须把上下文也包含进去，以便容易通过CSS多层选择器来区分。一种做法是BEM：

<div class="blog">
    <h1 class="blog__title">Tailwind CSS Introduction</h1>
    <p class="blog__content">
        这篇文章为大家介绍一下Tailwind CSS
    </p>
</div>

好吧，看起来更加“Semantic”了，但是冗长又啰嗦，这就足够劝退一部分人了。

所以也许在HTML中想把样式和内容彻底分离这种想法本身就不合理。

样式的复用：组合还是继承？

其实，各种CSS框架尝试去解决的问题无非就是一个——如何进行复用。

如果有一段代码逻辑，你需要写N遍，那么很自然你会用一个方法来封装一下，不至于每次都写一遍。

在网页中，相同的样式、相同的组件、相同的布局，等等，是太多太多了。

所以，类似是组合还是继承更优的话题，其实在CSS里面也有：

• 通过样式A衍生出一个样式B，姑且称之为继承
• 两个完全不相干的样式A和B在一起使用，姑且称之为组合

比如说对flex布局设计两个class用来组合：

.flex {
    display: flex;
    flex-direction: row;
}

.full {
    flex: 1;
}

在HTML中：

<div class="container flex">
    <div class="flex">Sidebar</div>
    <div class="flex full">Content</div>
</div>

尽管在CSS领域，很少有人提“继承”这个概念，但确实有类似的事情。使用@extend即可以做到：

.button {
  @extend %rounded-corner;
  
  border: 1-x solid blue;
}

不过，这种方式复用起来会很主观化，比如实现了一个按钮，但是如果用户对这个按钮样式不满意要自行定制的时候，就有些麻烦了。

而提供一些基础的class样式——CSS工具类来实现组合，是一个简单但又确实有用的思想。 这样的做法又被称为是Utility-first的方式。

Tailwind CSS体验

现在，你会看到Tailwind CSS十分流行。很多流行的框架都提供Tailwind CSS的支持。

Tailwind CSS使用起来也比较简单。比如，下面这一段代码：

<div className="relative flex flex-col h-screen">
  <Navbar />
  <main className="container mx-auto max-w-7xl px-6 flex-grow pt-16 flex flex-col">
    {children}
  </main>
  <footer className="w-full flex items-center justify-center py-3">
    Copyright &copy; 2024 Y Tech,ltd.
  </footer>
</div>

HTML跟样式不分离的好处这里就体现出来了。你不需要去对着css就大概能直接看出这个页面的布局。 当然稍微需要一点学习成本，比如pt-16意思是padding-top: 16px。

Tailwind CSS恐惧症

在使用Tailwind CSS的过程中，我觉得最大的障碍在于，我愿称之为Tailwind CSS恐惧症。

比如，Tailwind CSS官网的Alert示例：

<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
  <strong class="font-bold">Holy smokes!</strong>
  <span class="block sm:inline">Something seriously bad happened.</span>
  <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
    <svg class="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
  </span>
</div>

乍一看，一个简单的设计就需要很长一对class来组合，长到放在一行根本放不下。

而这可能正是阻碍多数人入手去使用它的一大心理障碍。

但最终构建网页时，不大会直接用Tailwind CSS从零开始，而是采取一些在其之上的UI框架， 例如Flowbite，NextUI之类。

所以它的定位也很清楚：是CSS工具类，而不是组件库。

使用Tailwind CSS之后，一大好处是，你几乎真的不用写自己的CSS了。

或许，这才是真正的HTML和CSS分离——我们不需要记住CSS的很多语法，取而代之，只需要知道要怎么使用。

PS：在Thoughtworks技术雷达中，Tailwind CSS早在2021年即标记为试验。然而似乎大佬们对这一技术缺乏关注，时至今日（2024/12/15），显然Tailwind CSS已经十分流行，个人认为，是时候标记为采纳了。

参考：

• https://www.thoughtworks.com/zh-cn/radar/languages-and-frameworks/tailwind-css
• https://adamwathan.me/css-utility-classes-and-separation-of-concerns/