CSS原子化-记第一次使用tailwindcss

什么是原子CSS

不同于大家常用的BEM这类规则，原子css就是拆分，所有 CSS 类都有一个唯一的 CSS 规则。例如如下

而像这种就不是

当我们使用的时候，直接写class名就可以

不知道大家是怎么样写css,我之前就是起个名字，然后直接写，例如上面那个app

这样的写法当然没问题，但是当你越写越多的时候，你会发现你需要写很多遍flex,很多遍width。这时候你就会自己去拆分，如果你项目里能用sass，你可能会写很多@include,这其实就已经是原子css了

起className、变量名真的是非常麻烦，而且时间一长很容易忘记，又得重新review代码。

将css拆分为原子之后，你势必要记住一些class才能书写，哪怕tailwindcss提供了完善的工具链，你写background，也要记住开头是bg。

我将上面那个app使用tailwindcss重写一下，他就会变成这样

当然看起来语义化还是不错的，当时当整个dom都是这样class名，势必会带来调试的麻烦，有的时候很难定位具体css问题

对于大部分属性而言，你可以只用到center,auto，100%，这些值，但是有时候你仍需要设定不一样的参数值，例如left，top，这时候你还需要起一个class名

首先需要安装，注意版本。因为tailwindcss 2.x需要postcss8,当前vue cli中postcss版本还是7。

npm i [email protected] -D

然后需要配置postcss.config.js,这里我试验了很多次，才找到同时配置tailwindcss,purgecss,pxtorem的，purgecss也是一个很有用的插件，后面再说。

然后需要引入相应的tailwindcss模块，它主要有3个模块

base:css reset，重置默认属性

components：一些组件样式

utilities：工具类，也就是最常用的样式封装

因此，我们需要引入这个工具类，我建议直接在main.js中引入import "tailwindcss/utilities.css"

为了方便书写，建议安装相应的vscode插件。

当你安装完，打包之后你会发现包体增加了很多，这是因为打包时直接打包了整个tailwindcss的缘故，引入purgecss之后，会自动去除没有使用的css,直接减少css的体积。

配置时按照上面的配置文件配置即可。

使用了tailwindcss之后，感觉就是一种全新的css体验，建议大家都用在项目里，这个库很值得使用。