Tailwind CSS 是最有名，最强大的 CSS 工具类框架。
工具类 CSS 是把常用的样式封装成类。如:
.p-0 {
padding: 0;
}
.text-xs {
font-size: 12px;
}
用工具类 CSS 写样式很快。原因：
- 专注于 HTML，不需要切换到 CSS 文件中。
- 节约起类名的时间。
其他优点:
- CSS 文件总体积比较小。
- 不存全局样式污染的问题。
Tailwind CSS 介绍
Tailwind CSS 是功能强大的 utility-first 的 CSS 类框架。
包含的工具类多
Tailwind CSS 包含几乎所有的常见工具类。包括:
- 布局: 盒模型，overflow，浮动，Position 定位，Flex 布局，Grid 布局等。
- 响应式: 定义了5个断点(sm, md, lg, xl, 2xl)。
- 尺寸：margin，padding，宽，高。
- 背景和边框。
- 字体。
- 颜色：定义了至少 80 种颜色。
- 渐变和动画。
- 伪类：Hover，Focus 等。
- 暗色模式(Dark Mode)。
其中，响应式，伪类的工具类可以其他工具类组合着用。如
<!-- 响应式 -->
<img class="w-16 md:w-32 lg:w-48" ... />
<!-- focus 伪类 -->
<input class="border focus:outline-none" .../>
<!-- hover 伪类 -->
<button class="bg-red-500 hover:bg-red-700" ...>
Hover Me
</button>
支持自定义配置
Tailwind CSS 支持某些改样式的默认值。如颜色，尺寸的样式值。具体见：这里。
删除没用到的样式代码
Tailwind CSS 包含那么多的工具类，项目中用到的可能只是一部分。Tailwind CSS 自带的 Purge 功能，可以删除没用到的样式代码。
减少记忆负担
使用 Tailwind CSS 有较大的记忆负担。要记很多类名。
减少记忆负担可以通过速查表 和 编辑器的智能提示插件: Tailwind CSS IntelliSense。
Tailwind CSS 很强大吧，赶紧用起来吧~
觉得本文对你有帮助。点个赞，分享给小伙伴们吧~
