查看“︁Tailwind CSS”︁的源代码

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

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

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

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

<syntaxhighlight lang="css">
.container {
    width: 960px;
    padding: 20px;
    display: flex;
    flex-direction: row;
}
.sidebar {
    display: flex;
}

.content {
    display: flex;
    flex: 1;
}
</syntaxhighlight>

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

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

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

比如说这样：

<syntaxhighlight lang="css">
.flex {
    display: flex;
    flex-direction: row;
}

.full {
    flex: 1;
}
</syntaxhighlight>

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

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

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

究其原因，大概是因为这个框架封装的确实很有格调。比如，下面这一段代码：

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

首先，跟传统的写法不一样，你不需要去对着css就大概能直接看出这个页面的布局——非常直观。当然稍微需要一点学习成本，比如pt-16意思是padding-top: 16px。

其次，这些命名本身是极其讲究的，当你习惯之后，你会很容易记住。比如，py-3和justify-center，并不是说越短越好，关键是好记。相比之下，像Bootstrap这种col-xs-offset-3，总是要想一想的。

除了使用Tailwind CSS来作为基础样式库之外，它跟一些UI框架的结合也是十分到位的。

比如，使用Next UI和Tailwind CSS可以很容易实现响应式布局：

<syntaxhighlight lang="html">
<NavbarContent
  className="hidden sm:flex basis-1/5 sm:basis-full"
  justify="end"
>
  <NavbarItem className="hidden sm:flex gap-2">
    <ThemeSwitch />
  </NavbarItem>
  <NavbarItem className="hidden sm:flex">
    <UserInfo />
  </NavbarItem>
</NavbarContent>
</syntaxhighlight>

[[Category:Hacker Radar]]