# @fuzdev/fuz\_css 中文文档

规范地址：https://npmcn.com/package/%40fuzdev/fuz_css/

版本：0\.81\.0
npm 元数据更新时间：2026-11-09T14:45:08.050Z
中文译文更新时间：2026-11-15T19:17:10.268Z
软件包许可：0BSD

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40fuzdev/fuz_css
原文对照：https://npmcn.com/package/%40fuzdev/fuz_css/?lang=original
项目主页：https://css.fuz.dev/
源码仓库：https://github.com/fuzdev/fuz_css

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.7 MB，249 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=24\.14
- 运行依赖：5 个
- peer 依赖：vite \>=6，@fuzdev/fuz\_util \>=0\.81\.0，@fuzdev/fuz\_schema ^0\.5\.0
- 首次发布：2025-12-07T14:45:22.241Z
- 最新版本发布：2026-11-09T14:45:07.887Z
- 近 30 天下载量：4904（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：58（近 12 个月 58 个）

## 中文简介

语义 - 第一种 CSS 框架和设计系统: 样式 HTML 默认, 由几个 knobs 衍生出的主题, 以及由您使用的内容生成的效用类

## 安装

```sh
npm install @fuzdev/fuz_css
```

也可以使用：`pnpm add @fuzdev/fuz_css`、`yarn add @fuzdev/fuz_css`、`bun add @fuzdev/fuz_css`

## README

# furz css (中文(简体) )

[![a fuzzy tuft of green moss](https://npmcn.com/package/%40fuzdev/fuz_css/static/logo.svg)](https://css.fuz.dev/)

> 具有更多功能的 CSS QQ

fuz css是一个语义上的第一个CSS框架和设计系统. 语义 HTML 外观以零类完成 : 标题、链接、按钮、窗体、表格和点名, 并屏蔽元素自身空间. 主题是一个小节点,不是样式表: 花色、意图、光度曲线和天平 重新确定CSS的颜色和大小, 对比、游戏和坡道命令检查已发运的主题 是一个API,你可以自己运行. 一个 Vite 插件生成一个样式表,只保留变量,基底样式, 和工具分类,用于Svelte、React、Preact、Solid和Plain HTML.

浏览 [文档](https://css.fuz.dev/docs) 时间 [cs.fuz.dev (英语)](https://css.fuz.dev/), (中文(简体) ), 尝试 [主题编辑器](https://css.fuz.dev/docs/themes#Theme-editor)。 。 。 . 更多关于堆栈在 [fuz.dev (英语)](https://www.fuz.dev/)。 。 。 .

它在早期的α 与突破变化前. 欢迎反馈和设计投入 页:1 [讨论情况](https://github.com/fuzdev/fuz_css/discussions)。 。 。 .

## 安装

```bash
npm i -D @fuzdev/fuz_css
```

## 使用量

添加 Vite 插件 :

```ts
// vite.config.ts
import {defineConfig} from 'vite';
import {sveltekit} from '@sveltejs/kit/vite';
import {vite_plugin_fuz_css} from '@fuzdev/fuz_css/vite_plugin_fuz_css.ts';

export default defineConfig({
    plugins: [sveltekit(), vite_plugin_fuz_css()],
});
```

然后从您的根版式或条目文件中导入其虚拟模块一次 :

```ts
import 'virtual:fuz.css';
```

JSX(反应、预告、固态),安装 `acorn-jsx` 传为 `vite_plugin_fuz_css({acorn_plugins: [jsx()]})`。 。 。 . 这个 [设置文件](https://css.fuz.dev/docs/setup) 涵盖每个框架 和虚拟模块的TypeScript声明.

### 没有建设步骤

软件包的两张平面样式表在任意一页工作, 基础 `style.css` 财务报告和审定财务报表 `theme.css` 与每个变量. jsDelivr 从 npm - pin 版本为它们服务 :

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fuzdev/fuz_css@VERSION/dist/theme.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fuzdev/fuz_css@VERSION/dist/style.css" />
```

这是完整的语义造型; 工具类和烤入的主题需要插件 .

## 语义第一

此表型看起来已经完成, 主题, 并仅以内置的会话类分隔 :

```html
<form>
    <label>
        <div class="title">email</div>
        <input type="email" />
    </label>
    <button>subscribe</button>
</form>
```

这个 `title` 阶级是基础风格承认的内在惯例之一, 喜欢 `selected` 财务报告和审定财务报表 `palette_c`。 。 。 . 当默认不覆盖某样东西, 到达一个类:

```html
<!-- composite, token, and literal classes -->
<div class="row gap_md justify-content:space-between">
    <button class="palette_c">delete</button>
    <button class="selected">saved</button>
</div>
```

## 从尾风来

-   **根字体大小为 `62.5%`**这样 `1rem` 在浏览器默认情况下为 10px 和正文为 `1.6rem`每一个 `rem` 页面上的长度跟着它, 包括第三方,这相当于作者意图的62.5%. 尾风 `p-4` 实值 `1rem`, 16px; 这里有 16px `1.6rem`,而相距符会带有比例尺(`p_xl` 默认值为 16px.
-   **公用设施来自您使用的东西**,通过解析来源找到 而不是和regex配对.
-   **四种类:** 用于设计变量的符号类映射(`p_md`, (中文(简体) ), `color_a_50`, (中文(简体) ), 关键词类是命名其属性的 CSS 关键词 (`flex`, (中文(简体) ), `sticky`, (中文(简体) ), `uppercase`, (中文(简体) ), 复合材料捆绑属性( e)`row`, (中文(简体) ), `box`, (中文(简体) ), `panel`, (中文(简体) ), 和字面内容是CSS本身在 `property:value` 窗体( e)`justify-content:center`, (中文(简体) ), `margin:0~auto`, (中文(简体) ), 与修改器类似 `md:` 财务报告和审定财务报表 `hover:`。 。 。 .
-   **Tailwind的关键词名称解析,它自己的名字不:** a 尾风项目 `flex`, (中文(简体) ), `hidden`,或 `sticky` 在这里得到同样的CSS, 不过 `items-center` 财务报告和审定财务报表 `justify-between` 毫无警告, 这样 `flex items-center` 半工半读. 拼写为文字`align-items:center`) (中文(简体) ).
-   **键盘、关键词和文字比复合材料:** 复合材料在下级联层中制取, 这样 `panel shadow_md` 获得中影 不管阶级命令.

再来点 [类](https://css.fuz.dev/docs/classes)。 。 。 .

## 捐款

[fuz.dev/贡献者](https://www.fuz.dev/contributing)

## 许可证 [🐦](https://wikipedia.org/wiki/Free_and_open-source_software)

[0BSD 数据](https://npmcn.com/package/%40fuzdev/fuz_css/LICENSE)

## 常见问题

### @fuzdev/fuz\_css 是什么？

语义 - 第一种 CSS 框架和设计系统: 样式 HTML 默认, 由几个 knobs 衍生出的主题, 以及由您使用的内容生成的效用类

### 如何安装 @fuzdev/fuz\_css？

在项目目录运行 npm install @fuzdev/fuz\_css，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@fuzdev/fuz\_util（\>=0\.81\.0）、@fuzdev/fuz\_schema（^0\.5\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @fuzdev/fuz\_css 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @fuzdev/fuz\_css 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @fuzdev/fuz\_css 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=24\.14。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @fuzdev/fuz\_css 可以商用吗？

@fuzdev/fuz\_css 使用 0BSD 许可。几乎没有限制：可自由使用、修改和分发，连保留版权声明也不要求。以上为概括，不构成法律意见，请以许可原文为准。

### @fuzdev/fuz\_css 的下载量有多少？

根据 npm 官方下载统计，@fuzdev/fuz\_css 在 2026/10/16 – 2026/11/14 这 30 天内被下载 4,904 次，日均约 163 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @fuzdev/fuz\_css 还在维护吗？

最新版本 0\.81\.0 发布于 2026/11/09（6 天前）；至今共发布 58 个版本，其中过去 12 个月发布了 58 个；首次发布于 2025/12/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。