css新的写法
Tailwindcss这个框架出来很久了,不过最近因为写css比较多,但是复用性特别差,尝试过BEM,原子写法,每个项目基本都要重写,在想有没有更好的方法,不知道什么时候Tailwindcss就冒出来了,这个框架也是原子式(atomic)的,这个概念不新,之前在自己的项目中自己也这样写过,是感觉方便,但是还是用着不舒服,估计是被自己的css恶心到了(逃)
文档是这样介绍的:
A utility-first CSS framework for它就给你提供一些工具集,就是平常你写
rapidly building custom designs Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
backgroud
,font-size
等等,每次都是定义一个class,然后添加相应的css属性,而Tailwindcss的做法是定义好一些class,每个都对应一个css属性,然后通过在元素上添加这些class来添加相应的属性,上面的图片来自于官网,你看它的class应该就知道,比如text-gray-600
,就是字体颜色,还可以有响应式md:flex
,当默认的不满足的时候你还可以通过写tailwind.config.js
配置文件添加新属性的class,这个香,是真香,这样使用后基本就能达到写的一些css可以在不同项目复用了(想的话)。【css|Tailwindcss 初体验】官网的文档我扫了一遍,用起来不难,我准备现在自己的项目中用用看,还是要点时间转换一下思维,不过这个框架我觉得是值得尝试的,用起来吧。
过段时间再来谈谈感受。
吐个槽,不知道是不是我自己网络问题,他们官网有的慢
referrence:
- https://tailwindcss.com/
- https://www.tailwindcss.cn/do...
推荐阅读
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- JavaScript|JavaScript之DOM增删改查(重点)
- 网络|一文彻底搞懂前端监控
- css|我用css精灵图拼接了自己的英文名字,不会还有人不知道精灵图技术吧()
- css|css三角的做法及其案例
- css|css中元素的显示与隐藏
- JavaWeb|JavaWeb学习——CSS
- flex|C语言-使用goto语句从循环中跳出
- java|你跳一次涨多少(今天见识到跳槽天花板!!)