原子化CSS框架：Tailwind CSS
目录
打包后的css文件占用空间变小：因为在class上原子化css
安装 - TailwindCSS中文文档 | TailwindCSS中文网
中文更友好：
扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入到一个静态 CSS 文件
引入原因：
【核心】css增长，样式错乱
多个 class 里都包含了类似的样式，但你需要写多次，css 会一直增长
作用域
原生css 没有模块作用域，默认全局，会有样式污染
| 方案 | 工作原理 | 优点 | 缺点/注意 |
|---|---|---|---|
Vue scoped | 自动添加唯一属性到选择器和元素。 | 使用简单，Vue原生支持。样式与组件绑定紧密。 | 权重较高，覆盖样式时可能需用深度选择器。 |
| CSS Modules | 在构建时编译类名，生成唯一名称映射表。 | 真正意义上的本地作用域，语言无关，最彻底。 | 需要构建工具支持，在JS/TS中引用类名稍显繁琐。 |
| CSS-in-JS | 在JS中写样式，运行时/构建时注入唯一类名。 | 极致灵活，可利用JS逻辑，样式与状态绑定紧密。 | 运行时开销可能较大，包体积增加，对SSR不友好。 |
| Shadow DOM | 浏览器原生支持的真正隔离。 | 最强隔离性，样式完全不会泄露和影响。 | 样式也难以从外部覆盖，灵活性差，有一定兼容性考虑。 |
| 命名约定 | 人工保证类名唯一（如BEM）。 | 无需工具，简单灵活。 |
调试
在 chrome devtools 里可以直接看到有啥样式，而且样式之间基本没有交叉，很容易调试：
之前写法容易多个 class 的样式相互覆盖，还要确定优先级和顺序
规范：把class当行内style动态属性用
「Atomic/Utility-First CSS」是和「Semantic CSS 」(语义化 CSS ) 相对的一种 CSS 规范。
原子 class 样式是只是作用在某个 html 标签的
-
原子化CSS：
.mt-4 { margin-top: 1rem; }，.flex { display: flex; }，.text-red-500 { color: #ef4444; }-
每个类都像一个单一的“原子”，功能纯粹。
-
.flex { display: flex; }这个规则在CSS中只定义一次，然后被所有元素复用。浏览器只需解析一次。编译后，CSS文件可以被浏览器缓存，极大提升后续页面的加载速度。
-
-
非原子化CSS：
.card { display: flex; flex-direction: column; margin-top: 1rem; padding: 1.5rem; background-color: #fff; border-radius: 0.5rem; box-shadow: ... }-
这个
.card类是一个“分子”，它由多个“原子”样式组合而成。 -
根据分子解析多次
-
| 特性 | 行内样式 | 原子化CSS框架 |
|---|---|---|
| 本质 | HTML的 style 属性 | HTML的 class 属性 |
| 性能 | 每个样式都需单独解析和应用 | 复用预定义的CSS类，性能更优 |
| 文件体积 | 随HTML增长而线性增长 | 通过工具类复用，CSS体积有上限 |
优点
不用命名样式
不用想并不重要的CSS变量名
缺少命名逻辑
不用撰写维护和模板【对应的独立css块】
不用不停滚动屏幕切换鼠标光标位置【vue】
打包后的css文件占用空间变小：因为在class上原子化css
CSS文件占比小（几kb），不用优化
插件：自带各种类名提示
插件名：Tailwind CSS IntelliSense
类型长且重复多次： @layer @apply指令扩展
。
类名的命名规则
1.布局类：
2.flex: 相当于 display: flex;
3.grid: 相当于 display: grid;
4.justify-between: 相当于 justify-content: space-between;
5.items-center: 相当于 align-items: center;
6.间距和尺寸类：
7.m-4: 相当于 margin: 1rem;
8.p-2: 相当于 padding: 0.5rem;
9.w-1/2: 相当于 width: 50%;
10.h-8: 相当于 height: 2rem;
11.文本和颜色类：
12.text-lg: 相当于 font-size: 1.125rem;
13.text-blue-500: 相当于 color: #4299e1;
常见的文本大小类：
text-xs: 额外小text-sm: 小text-base: 基础（默认大小）text-lg: 大text-xl: 额外大text-2xl: 双倍额外大text-3xl: 三倍额外大text-4xl: 四倍额外大text-5xl: 五倍额外大text-6xl: 六倍额外大
rounded-sm: 小圆角，比较小的圆角样式。rounded: 中等圆角，是默认的圆角样式。rounded-md: 中等圆角，稍大于默认圆角。rounded-lg: 大圆角，相对较大的圆角样式。rounded-xl: 非常大的圆角，比rounded-lg更大。rounded-full: 完全圆角，将元素变成圆形。
14.响应式类：
15.lg:flex: 在大屏幕上应用 flex 样式。
16.sm:w-full: 在小屏幕上应用 width: 100%; 样式。
Tailwind CSS 的类名遵循一种基于功能和直观的命名规律。以下是一些常见的规律：
1.基础形式： 类名通常由一个或多个单词组成，描述了一个具体的样式或功能。
<!-- 示例：字体大小 -->
<p class="text-lg">This is a paragraph.</p>
2.缩写： 为了简化和提高可读性，Tailwind 使用缩写形式的类名。
<!-- 示例：边距和内边距 -->
<div class="m-4 p-2">Content</div>
3.组合类名： 你可以组合多个类名以应用多个样式。
<!-- 示例：组合类名 -->
<div class="flex items-center space-x-4">
<!-- ... -->
</div>
4.变体类名： 使用响应式前缀和状态类名可以根据屏幕大小或状态应用样式。
<!-- 示例：响应式和状态类名 -->
<div class="lg:flex hover:bg-gray-200">
<!-- ... -->
</div>
5.颜色和尺寸： 颜色和尺寸类名通常包含有关样式的信息。
<!-- 示例：颜色和尺寸类名 -->
<button class="bg-blue-500 text-white p-2">Click me</button>
总体而言，Tailwind CSS 的命名规律强调清晰、简洁和功能导向。这种直观的命名风格使得在 HTML 文件中阅读和理解样式更加容易。
Prettier 插件：格式化
prettier-plugin-tailwindcss
自动将类名按官方推荐的顺序进行排序和分组，让结构更清晰。
Tailwind CSS vs UnoCSS
| 特性 | Tailwind CSS | UnoCSS |
|---|---|---|
| 定位 | 一个功能完整、开箱即用的 CSS 框架。 | 一个即时、按需生成的原子化 CSS 引擎。 |
| 工作原理 | 在构建时，通过扫描源代码，从预定义的工具类集中生成 CSS。 | 极致按需。在代码中被使用到的工具类才会被生成，没有使用的就不会存在。 |
| 性能 | 很好。通过 PurgeCSS 优化后，生成的 CSS 体积很小。 | 极佳。天生的按需生成机制，理论上生成的 CSS 体积是可能的最小值，且构建速度更快。 |
| 配置与预设 | 高度可配置，但语法是固定的。你通过配置来启用、禁用或扩展其预定义的样式工具。 | 极其灵活且可定制。核心是规则系统，你可以轻松创建任何你想要的工具类，甚至是图标。 |
| 语法与工具类 | 拥有一套成熟、统一、设计系统友好的工具类命名（如 mt-4, text-lg）。 | 兼容 Tailwind 语法，同时允许你定义任何语法。你可以直接使用 Tailwind 的类，也可以使用更简洁的（如 m-1 可定义为 m1）。 |
| 生态与集成 | 生态庞大且成熟。拥有官方插件、丰富的第三方组件库和广泛的社区支持。 | 生态在快速增长。与 Vite、Nuxt、Vue 等集成极佳。其预设系统可以复用 Tailwind 等社区的成果。 |
| 图标支持 | 需要单独引入图标库（如 Heroicons）。 | 原生支持图标。通过 @unocss/preset-icons 预设，可以直接在类中使用图标（如 <div class="i-mdi-alarm" />）。 |
参考链接
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
26
0- 0
已为社区贡献7条内容
所有评论(0)