TailwindCSS 介绍与实践-华琪软通

华琪软通HaKey SoftComm

公司新闻

TailwindCSS 是一个利用公用程序类的 CSS 框架，旨在提高开发人员的工作效率和代码质量。它提供了一组高度可定制化的 CSS 程序和组件。相比于传统的 CSS 框架，TailwindCSS 更加简洁和灵活，提供了常见的基础样式，如颜色和排版，还包含了许多组件和实用类，如表格、按钮和阴影等。可以和现有的前端框架如 React、Vue、Angular 等无缝集成，同时也避免了传统 CSS 开发中需要编写大量重复的样式代码，从而减少了样式冗余，提高了可维护性。

原子化 CSS

CSS 原子化是指定义一组表示单一用途样式单元的类。

TailwindCSS 将类名拆到了最小的单位，我们只需要用到一定数量的原子类，如下所示，就能完成一个样式。这也是使用 TailwindCSS 的 tree-shake 后，压缩后的 CSS 体积可以降低到 10kb 以下的原因。

<button class="... ring-2 ring-pink-300 ring-inset">Save Changes</button>
br

较好的语义化

使用 TailwindCSS 你不用花精力来定义类名，你可以使用内置具有良好语义化的类名，实现样式效果，举例如下：

样式类结构：Tailwind CSS 的样式类采用以类别-属性-值的结构命名，例如 .bg-blue-500 表示背景色为蓝色（blue），并且其颜色值为 500，类别为 bg。
属性值的命名规则：在 Tailwind CSS 中，属性值分为数值、颜色和布尔值三种类型。数值采用数字表示，例如 w-20 表示宽度为 20 像素；颜色采用单词或十六进制颜色值表示。
响应式样式类：在 Tailwind CSS 中，有一些响应式样式类，用于在不同的屏幕尺寸下显示不同的样式。例如 text-center sm:text-right 表示在小屏幕尺寸下文本右对齐，在大屏幕尺寸下文本居中。
其他常用样式类：在 Tailwind CSS 中，还提供了许多其他常用样式类，例如：

.rounded 表示圆角：.shadow 表示阴影；.bg-gradient-to-r 表示背景渐变。

你也可以一定程度定义符合你自己规则的类名，例如加上统一的前缀。

约束性

使用 TailwindCSS 功能类，是从预定义的设计系统中选择样式，这使得构建统一的 UI 变得更加容易。这也是 CSS 原子化与直接使用内联样式有着明显差异，TailwindCSS 具有约束性。

响应式

TailwindCSS 中的每个功能类都可以有条件的应用于不同的断点，在不同分辨率的设备上，可以轻松切换属性。

Hover、Focus 以及其它状态

与 TailwindCSS 处理响应式设计类似，通过为功能类添加适当的状态变体前缀，可以对处于 Hover、Focus 和其它状态的元素设置样式，而内联样式无法设置 Hover 或者 Focus 这样的状态。

总之，TailwindCSS 是一款强大且灵活的 CSS 框架，大大提高了前端开发的效率和代码质量。无论是独立开发者还是团队合作，使用 TailwindCSS 都能够快速构建出令人印象深刻的用户界面。