UnoCSS 教程简介

    欢迎来到 UnoCSS 教程！

    什么是 UnoCSS？

    UnoCSS 是由 Anthony Fu 打造的一款即时（On-demand）的原子化 CSS 引擎。

    需要注意的是，UnoCSS 并不是一个像 Tailwind CSS 那样的 CSS 框架，而是一个“引擎”。 这意味着它没有预定义一套固定的核心工具类。相反，它提供了一套极具扩展性的规则和预设系统，你可以用它来模拟 Tailwind CSS、Windi CSS、Tachyons，甚至是编写你自己风格的原子化 CSS。

    UnoCSS 的核心优势

    1. 极致性能：它没有像 Tailwind 那样的复杂 AST 解析，也没有预生成成千上万个不用的类。它仅仅是通过简单的正则表达式提取模板中的字符串，然后生成样式。构建速度通常只有 Tailwind 的十分之一。
    2. 完全可定制：你可以通过正则表达式编写高度灵活的匹配规则。例如 m-1 可以映射为 margin: 0.25rem;，同时 mt-1.5 可以映射为 margin-top: 0.375rem;。
    3. 属性化模式（Attributify Mode）：这也许是 UnoCSS 最具辨识度的特性。它允许你直接在 HTML 属性上写样式，极大地减少了 class 属性过长的问题。
      • 比如：<div bg="blue-400 hover:blue-500" text="sm white" p="y-2 x-4">
    4. 丰富的预设（Presets）：官方提供了 preset-uno（兼容 Tailwind 语法）、preset-icons（纯 CSS 图标方案）、preset-web-fonts 等强大预设，让你开箱即用。

    本教程将包含什么？

    本教程旨在带你从零开始配置并熟练使用 UnoCSS：

    1. UnoCSS 在 Vite/Rsbuild 等构建工具中的安装与集成。
    2. 基础预设（Preset Uno）的使用与配置（如自定义颜色、断点）。
    3. 深入理解并使用属性化模式（Attributify）。
    4. 强大的纯 CSS 图标预设（Preset Icons）详解。
    5. 编写自定义的静态规则（Static Rules）和动态规则（Dynamic Rules）。
    6. 如何编写和组织 Shortcuts（快捷方式），解决类名复用问题。

    本文为轻叶全栈手册原创内容，转载请注明出处。