聊聊 Windi CSS 的替代品 UnoCSS

Windi CSS

Windi CSS 是一个下一代工具优先的 CSS 框架，它以 Tailwind CSS 为基础，提供了更快的加载体验和一些额外的高级功能。以下是关于 Windi CSS 的一些关键特点：

1. 按需供应：Windi CSS 会扫描你的 HTML 和 CSS，然后按需生成工具类（utilities），这意味着只有你实际使用的工具类才会被包含在最终的 CSS 文件中，从而减少了文件大小和提高了加载速度。
2. 与 Tailwind CSS 兼容：Windi CSS 完美兼容 Tailwind v2.0，你可以无缝地将现有的 Tailwind CSS 项目迁移到 Windi CSS。
3. 无需 Purge：在生产环境下，Windi CSS 不需要对未使用的 CSS 进行清除（Purge），这简化了部署流程。
4. 快速的热模块替换（HMR）：Windi CSS 提供了更快的热更新时间，这对于开发大型项目时的效率提升尤为重要。
5. 高级功能：Windi CSS 提供了一些高级功能，如 attributify 和 shortcuts。attributify 允许你通过属性的方式定义样式，而不是传统的类名方式，这使得代码更加简洁和语义化。
6. 自定义配置：Windi CSS 支持自定义配置，你可以在项目的配置文件中定义自己的颜色、字体、间距等，以适应项目的具体需求。
7. 集成支持：Windi CSS 为主流工具提供了最佳适配，包括 Vite、Webpack 和 PostCSS 等，确保在不同工具上都能获得良好的开发体验。
8. 变量组合：Windi CSS 允许你通过使用括号对同一变体应用多个实用程序，这提供了更大的灵活性和控制力。

咱们在看看上面的介绍部分，第三点就是解决空间「存储」问题，在生产环境下面会删除一下不需要的规则，按需生成 也就第一点里面所提到的，通过自己的需求量进行生成规则，还有及时极高的自定义，当然这点TailWindCSS在V3的时候就已经有了，但 Windi CSS 给我们带来了很多便利。
我以前在项目中也是用到过 Windi CSS 当时给我带来了很多便利，尤其是当时优势太好了，特别是我喜欢它的高定制的特性，当时 TailWindCSS 在 V2 的时候还没有高定制，只能用预设好的。
当然 TailWindCSS 升级到 V3 以后也是有了更到的功能。我后期也开始使用了 V3 版本的 TailWindCSS ,后来 Windi CSS 的开发团队也就是 VueUse 团队可能觉得没有解决核心的问题，然后进行沉淀了一定的时间。
然后开源大佬们又开始研究新的方案 其中 Anthony Fu 是 UnoCss 的主要引领者

UnoCSS 的初步想法

1. 性能优先：UnoCSS 致力于提供极致的性能体验，通过优化算法和减少不必要的计算来确保快速的构建时间和高效的运行时性能。
2. 原子化 CSS：原子化 CSS（Atomic CSS）是一种将样式分解成单个功能类的方法，每个类只做一件事。UnoCSS 采用这种方法，允许开发者以最小的粒度控制样式。
3. 即时编译（JIT）：与传统的预编译（Pre-compile）方法不同，UnoCSS 采用即时编译的方式，这意味着只有实际用到的样式才会被生成和应用，从而减少最终构建的 CSS 文件大小。
4. 高度可定制性：UnoCSS 允许开发者通过配置文件来定义自己的预设，包括颜色、间距、字体等，使得 UnoCSS 可以适应任何设计系统。
5. 属性化模式（Attributify）：UnoCSS 支持属性化模式，允许开发者直接在 HTML 元素上使用属性来定义样式，而不是传统的类名，这使得代码更加简洁和语义化。
6. 纯 CSS 解决问题：UnoCSS 鼓励使用纯 CSS 的方法来解决问题，比如使用 CSS 变量和伪元素来实现复杂的布局和效果，减少对 JavaScript 的依赖。
7. 易于集成：UnoCSS 设计为易于集成到现有的项目中，无论是新的项目还是旧的项目迁移，都可以快速上手。
8. 开发者体验：提供良好的开发者体验是 UnoCSS 的一个重要目标，包括提供自动补全、错误提示、文档链接等特性，以帮助开发者更高效地工作。
9. 社区驱动：UnoCSS 鼓励社区参与，通过插件、预设和贡献代码来不断扩展其功能和生态。
10. 跨框架支持：UnoCSS 旨在支持各种前端框架和构建工具，如 Vite、Webpack、Vue、React 等，以满足不同开发者的需求。
11. 响应式设计：UnoCSS 提供了响应式工具类，使得开发者可以轻松地构建响应式布局。

12. 图标和组件：UnoCSS 提供了内置的 CSS 图标库和组件支持，使得开发者可以快速地在项目中使用图标和组件。
    UnoCSS 的高性能是毋庸置疑，尤其是即时编译这个点就是值得点赞的，下面我会使用 UnoCSS来创建一个项目并使用它演示

    UnoCSS 在项目中的使用

    我使用的是 Vite 项目集成 UnoCSS 下面是创建项目和安装 UnoCSS用到的命令
    sql 代码解读复制代码npm init vite@latest --在需要安装的目录下面创建Vite项目的命令
    √ Project name: ... vite_vue_unocss
    √ Select a framework: » Vue
    √ Select a variant: » TypeScript
    cd vite_vue_unocss --切换创建好的项目目录
    npm install --初始化
    npm install -D unocss --安装 unocss 到项目中

安装 UnoCSS 在 Vs Code 中的插件
这个插件主要是在我们编写 属性中写 css 规则的时候就是特别好用，跟 TailWindCSS的插件一个道理，就是你输入的时候给你提示
项目进行一点配置 vite.config.ts

import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
    UnoCSS(),,
  ],
})

main.ts中添加
arduino 代码解读复制代码import 'virtual:uno.css'

创建 uno.config.ts 文件
通常情况下会自动创建这个文件，你也可以手动添加，配置文件我在这里使用的是官方推荐的配置方案。下面是配置文件在中的代码(我在这里就是自己创建的 uno.config.ts 在根目录下跟 vite.config.ts 同一级) 。

import {
  defineConfig,
    presetAttributify,
    presetIcons,
    presetTypography,
    presetUno,
    presetWebFonts,
    transformerDirectives,
    transformerVariantGroup
  } from 'unocss'

  export default defineConfig({
    shortcuts: [
      // ...
    ],
    theme: {
      colors: {
        // ...
      }
    },
    presets: [
      presetUno(),
      presetAttributify(),
      presetIcons(),
      presetTypography(),
      presetWebFonts({
        fonts: {
          // ...
        },
      }),
    ],
    transformers: [
      transformerDirectives(),
      transformerVariantGroup(),
    ],
})

你也可以使用自己想要的预设，这个是官网的预设安装和导入教程 ，我在这里编写的就是默认预设，所有都安装好以后就是演示项目了

演示 Vite-Vue + TypeScript + UnoCSS 项目

添加 UnoCSS 的快捷方式

在这里我为了演示 UnoCSS的更好用的功能使用了快捷方式添加一些样式，说实话这个快捷样式在你统一项目的完整性是很重要的，比如卡片统一、按钮统一、颜色统一等等。我在这里简单的添加了一些，下面是在uno.config.ts 中添加的快捷方式。
css 代码解读复制代码 shortcuts: [

  // you could still have object style
  {
    btn: 'py-2 px-4 font-semibold rounded-lg shadow-md bg-teal-500 text-white hover:bg-teal-700',

  },
  {
    card_div: ' bg-white rounded-lg shadow-md p-4',
  },
  //定义动画的快捷方式
  {
    animation_e_i:'transition-all ease-in-out',
  },
],

代码编写

在这里简单的编写一些来演示是否成功配置 UnoCSS ，在 App.vue 的文件中简单的写一点属性样式和调用写好的。

<script setup lang="ts">
</script>
<template>
<div class="w-full h-full flex justify-center items-center">
  <div class="" >
    <p class=" text-amber text-6xl animation_e_i hover:text-8xl hover:rotate-20 cursor-pointer" >Hello UnoCSS</p>
    <button class=" btn" > UnoCSS 你好</button>
    <div class="w-full h-full flex justify-center items-center my2">
      <div class=" card_div w-60 h-60  hover:shadow-2xl flex justify-center items-center">这是一个通用卡片样式</div>
    </div>
  </div>
</div>
</template>

<style scoped></style>

效果演示

因为 gif格式的原因这里动画有点僵硬，但实际这个动画是非常丝滑。

结语

总之 UnoCSS 的高性能在我们项目中是非常有用的，有时它的性能是同类原子化中 5-200倍，给用户体验更好的更快，尤其是开发者非常友好，在运行和编译都是非常的快，都是按需生成，下面是你喜欢上 UnoCSS的可能原因👇
极佳的性能 --带来更佳的用户交互体验
预设配置 --入门门槛低
图标库 --你不需要为了找图标而烦恼
快捷方式 --提高系统统一性、提高效率
插件 --开发提示、不需要记住规则
集成 --语法里面已经继承了传统的语法
即时 --没有解析，没有 AST，没有扫描。 它比 Windi CSS 或 Tailwind CSS JIT 快 5 倍。
因为是按需生成所以你在小型的项目也就指一个html文件或者不需要创建项目的情况写你也可以选择 CDN 的方式直接使用它，通过需求量生成，不会对性能影响太大。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/normalize.min.css">
<!-- or -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css">

下面是在本篇文章中提到一下关键词
•UnoCSS
•Windi CSS
•TailWindCSS
•Anthony Fu --UnoCSS的主要引领者
•Vue
•Vite
希望本篇文章能够对您有用🌹