一个绝对让你惊艳的CSS框架——TailwindCSS
时间：2023-03-29 15:43:29
PHP
前言前段时间laravel更新到8.0版本，系统自带的Jetstream应用支架使用了TailwindCSS，勾起了我对TailwindCSS的兴趣。后来逐渐在项目中使用，整体感觉超级爽。喜欢他的简介Utility-FirstUtility-FirstCSSFramework。相对于bootstrap、semanticuiantd等组件库，tailwind只是一个css库。简单的说，它可以完成任意的ui交互，而上面的组件库一般都是后台应用，所以使用tailwind的环境更广。几个亮点首先是响应式设计。写css媒体查询还是比较麻烦，如下：@mediaonlyscreenand(max-width:760px){.navbar{width:100%;使用TailwindCSS来避免这些繁琐的事情。默认情况下，Tailwind使用移动设备优先的断点系统，类似于您可能在Bootstrap或Foundation中使用的系统。这意味着不带前缀的实用程序（如大写）适用于所有屏幕尺寸，而带前缀的实用程序（如md:uppercase）仅在指定的断点及以上有效。下面这段代码可以显示不同大小的不同样式，是不是比写媒体查询方便多了！
当然，媒体大小断点也可定制。//tailwind.config.jsmodule.exports={theme:{screens:{'tablet':'640px',//=>@media(min-width:640px){...}'laptop':'1024px',//=>@media(min-width:1024px){...}'desktop':'1280px',//=>@media(min-width:1280px){...}},}}th第二个方面是Postcss使用TailwindCSS结合postcss将所有基础css拆分成原子级别，同时还补充了各种浏览器模式前缀，具有更好的兼容性。例如：border:1pxsolid#eee;拆分为：border-width,border-style,border-color
还支持根据自己的设计来起草csssatoms真的很棒适合您自己的项目。首先，如果不是为了快速开发，恐怕没有多少人会完全满足于传统CSS框架的样式设计。其次，传统的CSS框架是通过“overrides”来定制的。一般来说，覆盖框架提供的变量是健康的，但定制能力是有限的。一种比较脏的方式是手写CSS来覆盖框架的原生样式，但是原生样式太复杂了（各种父类的不同情况，伪类的不同情况），即使是一个小组件，你也不能覆盖所有。而且你最好看看源代码。第三个方面是可维护性问题。以我们实现一个按钮效果为例。utilities类的实现如下：
