下一代CSS框架—Tailwind CSS

前言

TailwindCSS 是一个很棒的CSS类库，与其说是类库，不如说是一个超大的样式类工具集合，如果你掌握甚至习惯了 Tailwind 的语法。你会爱上它的。

每个月 npm 下载量高达 800 万次，jsDelivr 下载量高达 1000 万次，Star 数也突破 40K，依赖于它的 Packge 及 Github Repo 更是成千，足见其受欢迎程度。然而你需要使用它时，Node 的版本最好大于 12.13.0

TailWindCSS的粒度

越往下走，颗粒度越来越大，约束性变高，自由性不足。而 TailwindCSS 位于第二层。

<div style="{ borderRadius: '0.5rem', padding: '1rem' }"> Click </div>

-> <div class="rounded-lg p-4"> Click </div>

<div class="button"> Click </div>

<Button> Click </Button>

上一代css框架是提供完整的设计输出，是组件级别，位于第四层，颗粒度大、约束性高，自由性不足。例如一个<Input>组件，框架已经帮你写好了所有样式，你只要把类名丢进去，一个input就被美化了。当然bootstrap还提供了sass版本，你可以通过修改变量来实现自定义，但毕竟自定义空间不大。

Tailwind提供的是设计规范，相当于理念层面的素材。比如还是input组件，你需要首先对input进行拆解，它的边框、字体、阴影、圆角等等，你要从框架里面把这些元素挑出来进行组合。

这样做极大的激发了设计师的创作想象力，也为设计师编程提供可能。

优点

庞大的样式类声明

Tailwind 提供大量的样式类声明，使得我们在编写页面样式的时候，基本可以不用写一行 style 就能实现大部分场景，比如我们有一个div，想通过 flex 布局实现垂直居中功能，我们需要编写如下CSS：

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

使用 Tailwind CSS 只需在元素 class 上声明如下：

<div class="flex justify-center items-center">I am a div</div>

便捷的响应式

要实现不同分辨率屏幕下的样式，只需要在样式前加上对应的断点前缀：

<!-- 默认宽16；中等尺寸屏幕上宽32, 更大的屏幕上尺寸为48 等等 -->
<img class="w-16 md:w-32 lg:w-48" src="...">

小巧轻量

生产版本的库大小只有8.7kb

Visual Studio Code 插件支持

安装了插件后，即可体验飞快的开发

总结

未来的css框架趋势必然是：更细化，更工程化。

它的美化效果不一定是最好的。但是它的这种工作方式，定会在不同公司得到发挥，特别是有统一设计团队，要统一UI的公司。对于这些公司而言，写好设计规范，接下来就是拼凑。如何设计师直接通过组合得出效果，对研发人员来说也节省了时间。

TailwindCss 相关资源

官方文档

中文文档 - Tailwind CSS 中文文档

Tailwind CSS 是一个功能类优先的 CSS 框架，它由 Adam Wathan 创建。本站提供 Tailwind CSS 官方文档中文翻译致力于为广大国内开发者提供准确的中文文档，助力开发者掌握并使用这一框架。

https://www.tailwindcss.cn/docs

免费组件

Tailwind CSS Components. Examples and templates

Tailwind CSS examples from components by the community. Tailwind chart, grids, inputs, forms, templates and much more

https://tailwindcomponents.com/

Tailwind CSS Components. Examples and templates