CSS原子化-记第一次使用tailwindcss不同于大家常用的BEM这类规则，原子css就是拆分，所有 CSS 类都有

前两天看了这篇文章 juejin.cn/post/691707… ，提出了一个原子css的概念，同时也介绍了一个新的css库，tailwindcss,今天就写一下如何在vue中使用。

什么是原子CSS

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

.w-full{
  width:100%;
}
.h-full{
  height:100%;
}

而像这种就不是

.w&h-full{
  width:100%;
  height:100%;
}

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

<html>
	<body>
    	<div id="app" class="w-full h-full">
        	
        </div>
	</body>
</html>

原子CSS的优缺点

减少了css体积，提高了css复用

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

#app{
  width: 100%;
  height: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
}

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

减少起名的复杂度

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

增加了记忆成本

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

增加了html结构的复杂性

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

<div id="app" class="w-full h-full flex flex-col justify-center items-center">

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

你仍需要起class名

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

在vue中配置

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

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

const tailwindcss = require("tailwindcss");
const postcssPurgecss = require(`@fullhuman/postcss-purgecss`);
const pxtorem = require('postcss-pxtorem')({ 
  rootValue: 100,//结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
  propList: ['*']
})
const purgecss = postcssPurgecss({
  content: [ `./public/**/*.html`, `./src/**/*.vue` ],
  defaultExtractor (content) {
    const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
    return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || []
  },
  whitelist: [],
  whitelistPatterns: [ 
    /-(leave|enter|appear)(|-(to|from|active))$/, 
  /^(?!(|.*?:)cursor-move).+-move$/, 
  /^router-link(|-exact)-active$/, 
  /data-v-.*/,
  /van-.*/ //这里就是我引入了vant，所有需要排除所有van开头的样式
  ]
});
module.exports = {
  plugins: [
    tailwindcss,
    pxtorem,
    purgecss //去掉环境判断
    //...(process.env.NODE_ENV === "production" ? [purgecss] : []),
  ],
};

最近发现了配置时的一些问题，在此更新一下

purgecss默认只在production模式下生效，可能导致本地和线上不一致，建议去掉环境判断，虽然本地开发慢一点
如果使用了第三方组件库，purgecss可能会自动去除组件的样式问题，建议修改白名单

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

base:css reset，重置默认属性
components：一些组件样式
utilities：工具类，也就是最常用的样式封装因此，我们需要引入这个工具类，我建议直接在main.js中引入import "tailwindcss/utilities.css"
为了方便书写，建议安装相应的vscode插件。

配置purgecss

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

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

文档： tailwindcss.com/docs/font-w…