CSS 原子化

Tailwind Css

概念

css 属性原子化，每一个 css 属性都有对应的类名，通过直接书写 class 的方式代替 css 的编写，即在 html 中书写 class 即可实现样式。

Tailwind Css 与 Bootstrap 不同之处在于：前者对 css 属性操作更加细化且提供了更丰富的功能，后者则是样式类的预设。

`Tailwind Css` 常见功能

响应式，移动端优先
生产环境 tree-shaking，它对每个 css 都有对应的类名，所以它的原始包体积非常大，故生产环境必须剔除没有使用到的 class
支持 html 中就能快速实现 hover 、 focus 等样式
可通过 @apply 实现自定义功能类
可通过 tailwind.config.js 定制扩展样式
提供 Tailwind UI
v3 版本开发环境提供 JIT(即时编译) 功能，解决开发环境下 css 产物体积庞大问题

优劣势

Tailwind CSS 在 v3 版本也引入了 JIT(即时编译) 的功能，解决在开发环境下 css 产物体积庞大问题
配合 vscode 插件能快速书写样式
但前期上手需要时间适应

Windi CSS

作为前者的替代方案，实现按需生成 css 类名的功能，开发环境体积大大减少，速度飞快，并提供了 attributify 、 shortcuts 等独有的特性。

attributify 属性化，允许以 props 的方式去定义样式属性
shortcuts 用来封装一系列的原子化能力，尤其是一些常见的类名集合

attributify

html

<button
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>attributify</button>

shortcuts

//windi.config.ts
import { defineConfig } from "vite-plugin-windicss";

export default defineConfig({
  attributify: true,
  shortcuts: {
    "flex-c": "flex justify-center items-center",
  }
});

定义后使用

html

<div className="flex-c"></div>
<!-- 等同于下面这段 -->
<div className="flex justify-center items-center"></div>

Unocss

可以在此快速查询对应的类 Unocss Interactive

CSS 原子化 ​

Tailwind Css ​

概念 ​

Tailwind Css 常见功能 ​

优劣势 ​

Windi CSS ​

attributify ​

shortcuts ​

Unocss ​