共计 1819 个字符，预计需要花费 5 分钟才能阅读完成。
前言
前段时间，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:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500"></div>当然了，媒体尺寸断点也是能够自定义的。
// tailwind.config.js
module.exports = {
theme: {
screens: {
'tablet': '640px',
// => @media (min-width: 640px) {...}
'laptop': '1024px',
// => @media (min-width: 1024px) {...}
'desktop': '1280px',
// => @media (min-width: 1280px) {...}
},
}
}第二方面是 Postcss 使用
Tailwind CSS 联合了 postcss，将根底的 css 全副拆分为原子级别，同时还补全各种浏览器模式前缀，兼容性更好。例如：border: 1px solid #eee; 拆分为：border-width、border-style、border-color<div class=”border-width border-style border-color”></div> 而且还反对依据本人设计稿定义符合本人我的项目的 csss 原子，这点真的很棒。
第一，如果不是为了快捷开发，恐怕不会有太多人齐全称心传统 CSS 框架的款式设计。
第二，传统 CSS 框架通过“笼罩”进行定制。一般来讲，衰弱的做法是笼罩框架提供的变量，然而定制能力很无限。脏一点的做法就是手写 CSS 笼罩框架原生款式，然而原生款式之简单（各种父级的不同状况，伪类的不同状况），哪怕一个小的组件，你也无奈八面玲珑。并且你最好得看源码。
第三方面是可维护性问题
就拿咱们实现一个按钮成果来说，应用 utilities class 实现的话如下：
<!-- Using utilities -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Button
</button>如果说有比拟罕用的，这里还能应用 @apply 指令围绕通用实用程序模式创立形象，能够轻松解决此问题。
<!-- Extracting classes using @apply -->
<button class="btn btn-blue">
Button
</button>
<style>
.btn {@apply font-bold py-2 px-4 rounded;}
.btn-blue {@apply bg-blue-500 text-white;}
.btn-blue:hover {@apply bg-blue-700;}
</style>这样保护起来也比拟不便，相比 bootstrap 等这些框架，显得更加灵便，可操作性更强。
结语
总的来说，Tailwind CSS 扭转了传统的形式，这样的写法代码量远远少于传统写法，能够大大节约开发工夫，进步开发效率，我是真的有被惊艳到，你感觉怎么样呢？
原文连贯：https://www.wjcms.net/archive…
