Tailwind CSS是一个与Bootstrap、Element等不同的CSS框架,它没有类似btn
这样的组件样式,而是基于Utility构建的一套CSS。
Tailwind CSS的理念是提供一套完整的,最小单位的工具类CSS,再由设计师将它们组合起来。
如果页面有很多Button,需要统一样式,难道需要在每个Button的class中重复一大串样式名吗?
为了复用一组样式,Tailwind提供了一种简单的自定义样式的方式,例如,把上述样式简化为btn-submit
:
<button class="btn-submit">Submit</button>
仅需用@apply
指令告诉Tailwind CSS:
.btn-submit {
@apply bg-slate-200 hover:bg-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700;
}
实际上,使用Tailwind CSS,几乎不会用到手写原始的Style:
.foo {
width: 123px;
}
因为即使是width: 123px
这样的样式,也可以用w-[123px]
表示:
<div class="w-[123px] text-center">...</div>
Tailwind CSS负责将w-[123px]
转换为width: 123px
。
理解了Tailwind CSS的设计理念,以及如何组合并自定义样式,可以非常快速地定义出符合设计的样式。甚至在浏览器打开开发者工具,查看Bootstrap的Button,可以用Tailwind CSS快速复刻出相同样式的Button。
和Bootstrap这类直接提供组件的CSS框架相比,Tailwind CSS介于组件和原始CSS之间,它适合需要自定义CSS、希望能有自己风格的网站。越来越多的前端框架如Next.js都推荐使用Tailwind CSS,Tailwind CSS有望成为最流行的CSS框架。