在不使用构建步骤下使用 UnoCSS CLI

在不使用构建步骤下使用 UnoCSS CLI

UnoCSS CLI 提供了一种不使用构建工具，就可以使用 UnoCSS 的方式来编写 CSS 代码的方案。

安装

新建文件夹，并使用 npm init 命令初始化项目。新建 index.html 文件。

安装 UnoCSS CLI：

1
npm install -D unocss

使用

项目结构：

project-structure

在项目根目录下创建一个 uno.config.js 文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { defineConfig, presetAttributify, presetWind3 } from 'unocss'

export default defineConfig({
    cli: {
        entry: {
            patterns: ['index.html']
        }
    },
    shortcuts: {
        'ooooohhhhhh': 'text-red-500 text-3xl font-bold',
    },
    presets: [
        presetAttributify(),
        presetWind3(),
    ]
    // ...
});

更多配置项见 Configuring UnoCSS。

然后在 index.html 文件中添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 见后文描述，这是 UnoCSS 生成的样式文件 -->
    <link rel="stylesheet" href="./uno.css">  
</head>

<!-- 使用 presetWind3 -->
<body bg-stone-800>  
    <!-- 使用 presetAttributify -->
    <h1 text="2xl blue-500">This is h1</h1>
    <!-- 使用 shortcut -->
    <h2 ooooohhhhhh>this is h2</h2>   
</body>
</html>

上述代码：

  1. 背景深棕色: <body bg-stone-800> 使用了 presetWind3 预设，可以直接使用 bg-stone-800 类名来设置背景颜色。这里的类名和 TailwindCSS 是一样的。上述写法等同于class="bg-stone-800"。
  2. 字体加大、颜色蓝色: <h1 text="2xl blue-500">This is h1</h1> 使用了 Attributify preset 预设，可以直接使用 text 属性来设置字体大小和颜色。text="2xl blue-500" 等同于 text-2xl text-blue-500。
  3. 红色、字号 3xl、加粗: <h2 ooooohhhhhh>this is h2</h2> 使用了 shortcuts 配置，可以直接使用 ooooohhhhhh 来应用配置文件中定义的样式。

此时浏览器肯定是不识别的，运行：

1
npx unocss index.html

会生成 uno.css 文件，然后在 index.html 文件中引入即可。

example

注意事项

  • 如果不按照官方文档的方法，使用 watch，每次修改 index.html 文件后，都需要重新运行 npx unocss index.html 命令。
  • 如需清空原有样式，需要自行引入一些 css，见 Browser Style Reset
css
#frontend #unocss #tailwindcss #nodejs
在不使用构建步骤下使用 UnoCSS CLI
https://taylorandtony.github.io/2025/03/28/css-在不使用构建步骤下使用-UnoCSS-CLI/
作者
TaylorAndTony
发布于
2025年3月28日
许可协议