Tailwind CSS

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

究其原因，就是CSS这项技术其实并不算简单——你总是需要对样式改来改去，才能实现出满意的效果。 为了让网页变得好看，传统的做法都是为一个div或者其他什么元素设置一个class：

<div class="container">
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
</div>

这样，每一个元素都有一个css的分类，然后，再通过css来定义出它们的样式：

.container {
    width: 960px;
    padding: 20px;
    display: flex;
    flex-direction: row;
}
.sidebar {
    display: flex;
}

.content {
    display: flex;
    flex: 1;
}

这样，如果要改变某一个div的样式，直接去改它对应的class就可以了。

但是这样有一个问题，如果系统复杂的情况下：

• 我们不可能给每一个div都单独一个class，势必需要复用一些已有的样式，也就是说，多个div会应用到同一个class
• 不同的class中也会有重复的样式，为了进一步复用，那么可以将它们再分散成不同的class进行组合

比如说这样：

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

.full {
    flex: 1;
}

这样在html中可以通过组合一些class来实现复用：

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

提供一些基础的class样式来实现组合，这是一个简单但又确实有用的思想。这样的框架其实很多，像Bootstrap就是， 但现在你会看到Tailwind CSS十分流行。