第 011 期 用 Tailwind CSS 来快速写样式

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 很强大吧，赶紧用起来吧~

觉得本文对你有帮助。点个赞，分享给小伙伴们吧~

参考文档

• Tailwind CSS