学习 tailwindcss 自制css工具类

670 阅读1分钟

灵感来源

最近在使用 vscode + vue3 开发中,无意间看到了 tailwindcss,试用一段时间后,被它的工具类惊艳到了,第一次感觉编写页面代码如此简单!(回想以往自定义class写样式类来回翻的痛苦,不堪回首啊!😫)

大部分常用样式都有类,而且还支持自定义值、伪类等。

image.png

此处使用的 tailwindcss 版本是 3.1.2,点击查看官网

我现在的公司开发的项目,全是面向移动端,因此选择了uniapp + hbuilderx 来开发,于是就想到能否找到类似tailwindcss 的工具类插件,可惜插件市场没有找到合适的!

既然没有,那何不自己创造一个?

创建css工具类

于是自己动手创建项目:

image.png

  • 大致包括有flex、grid布局,长宽、边距、边框、文字、盒模型、颜色
  • uni.scss 就是 uniapp 项目默认的uni.scss,我希望能够定义颜色的使用引用uni的变量。
  • class.css、class.min.css就是最终编译出来的工具类,编译工具是Koala

将class.min.css放到uniapp项目的根目录,在App.vue引入,然后就可以愉快的编码啦!

image.png

下载链接