一款绝对让你惊艳的CSS框架——TailwindCSS
前言 前段时间,laravel更新8.0版本,系统内置的Jetstream应用支架使用的是Tailwind CSS,于是勾起了我对Tailwind CSS的兴趣。 后来项目中也是逐步使用,总体感觉超级爽。就像他的简介一样Utility-First效用优先的CSS框架。 相比bootstrap,semantic ui antd这些组件库,tailwind只是个css库,简单的说就是可以完成任何ui交互,而上面的组件库一般就是做个后台应用,所以使用tailwind的环境更广泛一些。 几个亮眼的地方 首先是响应式设计。 css的媒体查询写起来还是比较麻烦的,如下: @media only screen and (max-width: 760px) { .navbar { width:100%; } } **使用了Tailwind CSS就免去这些繁琐的东西。**默认情况下,Tailwind使用移动优先断点系统,类似于您在Bootstrap或Foundation中可能使用的系统。 这意味着未加前缀的实用程序(如uppercase)在所有屏幕尺寸上都有效,而带前缀的实用程序(如md:uppercase)仅在指定的断点及以上断点生效。 如下一段代码就可以实现不同尺寸显示不同样式,是不是比媒体查询写法方便很多呢! <div class="bg-red-500 sm:bg-green-500 md