什么是原子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-.*/ ],
});
module.exports = {
plugins: [
tailwindcss,
pxtorem,
...(process.env.NODE_ENV === "production" ? [purgecss] : []),
],
};
然后需要引入相应的tailwindcss模块，它主要有3个模块
- base:css reset，重置默认属性
- components：一些组件样式
- utilities：工具类，也就是最常用的样式封装
因此，我们需要引入这个工具类，我建议直接在main.js中引入import "tailwindcss/utilities.css"
为了方便书写，建议安装相应的vscode插件。
配置purgecss
当你安装完，打包之后你会发现包体增加了很多，这是因为打包时直接打包了整个tailwindcss的缘故，引入purgecss之后，会自动去除没有使用的css,直接减少css的体积。
配置时按照上面的配置文件配置即可。
- 文档： tailwindcss.com/docs/font-w…
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！