梦回2008样式原子化:Tailwind是如何让Facebook拜倒在她的石榴裙下？

毕竟我是崔战神阿

已于 2022-06-21 18:03:38 修改

阅读量496

点赞数 8

分类专栏：性能优化 css 前端文章标签： javascript 开发语言 ecmascript

于 2022-06-21 17:42:02 首次发布

本文链接：https://blog.csdn.net/qq_37021136/article/details/125392907

版权

性能优化同时被 3 个专栏收录

13 篇文章 2 订阅

订阅专栏

前端

13 篇文章 1 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

文章目录

前言
一、什么是CSS原子化?
二、Tailwind的使用心得以及优缺点分析
- 优点
- 缺点
总结
- 明天,又是充满希望的一天!

前言

近些年前端掀起了一股“诡异风气”,即CSS原子化相关类库,如Tailwind CSS，Windi CSS ，Tachyons等原子化组件库层出不穷,甚至作为本篇文章主人公的Tailwind在GitHub上已经有58K这等如此恐怖的星数,

在这里插入图片描述

刚好博主在近期在开发一款轻量级项目,于是便选用了此框架作为UI类库,在此记录一下使用心得,方便给后继的码农们选用技术框架时能更好的分析。

一、什么是CSS原子化?

一种 CSS 的架构方式，它会更加倾向于小巧且用途单一的类名，并且会以视觉效果进行命名。
如Bootstrap以及Jquery中都存在对应的CSS原子化思想。举个简单的例子

.m-0 {
  margin: 0;
}
.text-red {
  color: red;
}

这种写法其实就是最简单的CSS原子化,根据功能点或者视觉效果把对应的Class给抽离出来,在业务中进行使用。达到快速开发的目的。人们总说潮流总是循环往复的。十五年前穿的背带裤2022年又流行了起来，葬爱家族和火星文也随着潮流的回滚重现于当代。代码也是一样。
好了，下面直入本文的主题，Tailwind的使用心得以及优缺点分析。

二、Tailwind的使用心得以及优缺点分析

上一张图，图为Tailwind官网对自己定位的分析

在这里插入图片描述
一旦你使用过,你会觉得这个组件库跟他们自己的定位简直无比符合
由于国内外开发环境不同,国内为了快速开发衍生出来很多如Element ui，Ant，Vant，Colorui等等层出不穷的UI框架,这些框架大多是把样式写好,你只需要专注于业务逻辑,便可快速的进行开发，国外不行，并且他们并没有这个风气，以至于国外很多人还在用Bootstrap和Jquery，这款样式精美，使用起来高度自由的UI框架便应运而生，成为目前大火的框架，那我们国内开发者能不能使用这个框架，体验它的特性的同时获得一些感悟呢？怀着这种疑问，我选型了Tailwind。

优点

1.原子化带来的快速开发能力

为什么这样说？上一个简单的代码片段截图来演示一下
在正常的开发中,你需要给一个元素加左边的边距是这样的：

.class{
  margin-left: 10px
}

或者是这样的：

<div style="margin-left:10px" ></div>

但是在Tailwind里面,它是这样的

<div class="ml-10" ></div>

大量的常用样式被简化成w-10,h-10,ml-10,flow-right甚至boxshadow也被精简名为为shadow的class,这里大多数的名称都是你没有学习成本就能蒙对的,为了加快开发,
他们开发了相应的vscode插件WindiCSS IntelliSense，对Tailwind支持提示,让新手也能迅速上手。

在这里插入图片描述
2.高度的开发自由,高度的定制权限

“什么都没给你,便是把全部都给了你”,它支持把Tailwind各种样式糅合在一起再给你提供一个单独的class类,甚至你可以自定义各种主题色和组件，达到全局样式统一的效果,例如日常开发中一个盒子居中效果在Tailwind里面是这样的:
g.cn/f12cae1a608c47f1950af8c4f8af4524.png)
只需要加上对应的class分类就可以,还可以在tailwind.config.js配置中重新定义一套你喜欢的全局样式
在这里插入图片描述
或者利用它的样式库,迅速实现一个组件,在全部项目中通用

可谓是把自由二字给玩明白了

3.多项目之间可以实现组件共享而不需要重新开发

例：A项目用Ant ，B项目用Element ui。而我需要把A的一些业务逻辑搬到B上面，这个时候会面临组件库不一致而需要大量重构的问题，重新引入另外一个库又会有很多问题，如果开始技术选型时使用Tailwind作为UI框架，用其来编写组件，则完全不担心这个问题，所有的项目，只要你上了Tailwind那么我就能复制粘贴一下配置文件达到所有项目样式和色调高度统一的目的。而不需要进行额外开发

4.令人诧异的体积包

著名社交网站Facebook首页在使用Tailwind重构之后，css的代码体积包从440KB压缩至70KB，有人会有疑问，既然这个框架把所有的css都封装了起来，那么体积不会变大吗？Tailwind的开发者也想到了这个问题，并开放了对应的能力来压缩代码
在这里插入图片描述
只需要在purge一栏进行简单配置，便可自动压缩掉没有使用的CSS代码，非常智能，但是这个压缩体积的算法目前来看是有点问题的(稍后在缺点说明)，但我仍愿称之为瑕不掩瑜。

5.让人眼前一亮的暗黑模式和适配模式

之前有写过element ui 一个更换主题的功能，当时由于构思不够巧妙，只是堪堪的实现了功能，但是在切换的时候略有卡顿，性能方面并没有处理好。Tailwind默认内置了暗黑模式和正常模式的功能，只需要简单的两三行代码便可以实现页面的双主题切换，简直不要太香,以Vue为例Demo如下:
首先把配置里面的darkMode字段设置为class：

在这里插入图片描述

然后找到你的app.vue最外层容器给其加上内置的dark类名

在这里插入图片描述

这个时候你页面所有以dark:xxxx的样式都会自动进行响应并切换对应的样式
只需要控制app.vue的dark一类名有无便可以实现对应的主题切换功能

在这里插入图片描述

其次是适配模式，我们在实际开发中如果需要完美适配移动端，需要各种媒体查询来实现对应的效果，
但是Tailwind贴心了给我们内置了相关的媒体查询功能，
只需要加前缀md：xxx对应容器便会自动进行响应

在这里插入图片描述
雀实是有点香的。

缺点

人无完人，人是这样，框架亦然。

1.宽度等一些是有限制的

Tailwind的宽度默认是有限制的，或许是为了风格统一，各种宽度高度以及行高便给了你固定的几套，如图：
在这里插入图片描述
如果你不想要它的响应式(一般也不会)，就想给固定的像素的话就只能在tailwind.config.js里面自己进行定义,如果多个项目都使用这个类库综合起来看时间是减少了,单个的话会感觉繁琐

2.自动压缩样式的代码并不完善