# @\_linked/css 中文文档

规范地址：https://npmcn.com/package/%40_linked/css/

版本：0\.3\.3
npm 元数据更新时间：2026-10-28T08:03:38.288Z
中文译文更新时间：2026-11-06T18:34:24.653Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40_linked/css
原文对照：https://npmcn.com/package/%40_linked/css/?lang=original
项目主页：https://github.com/linked-fw/css#readme
源码仓库：https://github.com/linked-fw/css

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

- 包体积（解压后）：64.9 kB，10 个文件
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：tailwindcss ^4
- 首次发布：2026-04-06T09:55:21.387Z
- 最新版本发布：2026-10-28T08:03:37.886Z
- 近 30 天下载量：2478（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 14 个）

## 中文简介

CSS 链接框架的变量、公用事业和主题默认

## 安装

```sh
npm install @_linked/css
```

也可以使用：`pnpm add @_linked/css`、`yarn add @_linked/css`、`bun add @_linked/css`

## README

# 链接/cs

CSS 变量、公用事业和主题默认 [链接](https://linked.cm/) 框架.

这是一个 **CSS 仅限资产包** ——没有JavaScript,没有建设步骤. 它把设计学词汇 和Tailwind v4主题 原始人所有 `@_linked/*` 组件软件包和基于链接的应用程序消耗.

* * *

## 文件

| 文件 | 目的 |
| --- | --- |
| [`preflight.css`](https://npmcn.com/package/%40_linked/css/preflight.css) | 尾风产生的飞行前 `:not()` 保留内含元素样式的除外情形( 3)`<span>`, (中文(简体) ), `<a>`, (中文(简体) ), `<b>`, (中文(简体) ), `<em>`, (中文(简体) ), `<code>`(见A/C.5/49/70,附件)。 应用 `@_linked/css` 通常导入此选项 _改为_ 通过分块进口模式捆绑的尾风预飞(见下文). |
| [`package.css`](https://npmcn.com/package/%40_linked/css/package.css) | 尾风 v4 `@theme` 登记 `--spacing: 0.25rem`。从任何使用 Tailwind v4 的模块 CSS 文件导入此选项 `--spacing(N)` 函数. |
| [`theme-defaults.css`](https://npmcn.com/package/%40_linked/css/theme-defaults.css) | 构成部分一语义符号(`--card-bg`, (中文(简体) ), `--popover-bg`, (中文(简体) ), `--modal-shadow`~15 链接组件组+尾风 `@theme static` 调色板+ `@source inline()` 安全名单。 从您的应用主题导入此选项 . |
| [`utilities.css`](https://npmcn.com/package/%40_linked/css/utilities.css) | 尾风 v4 `@utility` 原始布局的混合剂—— `surface-base`, (中文(简体) ), `card-base`, (中文(简体) ), `modal-base`, (中文(简体) ), `popover-base`, (中文(简体) ), `section-base`, (中文(简体) ), `element-base`。从您的应用程序主题同时导入此选项 `theme-defaults.css`。 。 。 . |
| [`docs/styling-and-themes.md`](https://npmcn.com/package/%40_linked/css/docs/styling-and-themes.md) | 应用作者长式主题指南. |

* * *

## 建议的进口订单

在您应用程序的主主题文件中( 如. `src/css/theme.css`:

```css
/* 1. Tailwind v4 layers — split-import pattern to substitute the LINCD preflight */
@layer theme, base, components, utilities;
@import 'tailwindcss/theme.css' layer(theme);
@import '@_linked/css/preflight.css';            /* substitutes Tailwind's bundled preflight */
@import 'tailwindcss/utilities.css' layer(utilities);

/* 2. Tailwind config (provides Linked component content paths) */
@config "@_linked/cli/tailwind.config.js";

/* 3. @_linked/css theme defaults + utility mixins */
@import '@_linked/css/theme-defaults.css';
@import '@_linked/css/utilities.css';

/* 4. Your app-specific overrides — brand palette, page-level surface tokens, dark mode */
@theme static {
  --color-primary-500: #116d8d; /* example brand color */
  /* ... */
}

:root {
  --bg-page: var(--color-gray-50);
  --bg-card: var(--color-white);
  /* ... */
}
```

**为什么是拆分进口?** 简称 `@import 'tailwindcss';` 带泰风来 _捆绑_ 飞行前,使用裸体 `*, ::before, ::after` 重置会擦去内含元素样式( e)`<b>`, (中文(简体) ), `<em>`, (中文(简体) ), `<span>`, (中文(简体) ), `<a>`, (中文(简体) ), `<code>`(见A/C.5/49/70,附件)。 对于提供丰富内容的app shells(chatbot消息,本体学描述,markdown-entered text),重置过于激进. `@_linked/css/preflight.css` 同一尾风预飞减倒入内向擦拭,通过 `:not()` 通用选择器上的排除。 单独导入地层让我们可以代替LINCD友好的飞行前.

在一个链接组件包的模块CSS(例如:. `Toggle.module.css`:

```css
@import './helpers/mixins.css';
@import '@_linked/css/package.css';

.Root {
  padding: var(--toggle-padding-y, --spacing(1)) var(--toggle-padding-x, --spacing(2));
  /* ... */
}
```

组件包通常只需要 `package.css` 因为消费的应用提供了全部的主题. `package.css` 故意是最小的,所以它不会增加组件捆绑.

* * *

## 命名系统

`@_linked/css` 用途 **两个有意命名层**,两个链接式(都不是Tailwind-native):

### 国家第一/通用代号

实例: `--bg-card`, (中文(简体) ), `--bg-modal`, (中文(简体) ), `--bg-page`, (中文(简体) ), `--spacing-card`, (中文(简体) ), `--shadow-card`, (中文(简体) ), `--radius-modal`。 。 。 .

这些是页面/表层符号,由 `utilities.css`是因为 `@utility` 混合剂 它们与 Tailwind 通用类命名一致(`bg-*`, (中文(简体) ), `shadow-*`(见a/c.5/49/70,附件). **由消费的应用程序定义**,一般在应用的主主题文件中.

### 构成部分一/具体符号

实例: `--card-bg`, (中文(简体) ), `--popover-bg`, (中文(简体) ), `--modal-bg`, (中文(简体) ), `--surface-bg`, (中文(简体) ), `--button-primary-bg`, (中文(简体) ), `--field-border`。 。 。 .

这些是原始成分 组件引用其默认值的状态符号,但会为精细的覆盖显示特定组件的符号. **定义 `theme-defaults.css`**。 。 。 .

### 为什么两者

元件会分层 :

```css
.Toggle {
  background: var(--toggle-bg, var(--control-bg, var(--bg-active)));
  /*          └─ component-specific  └─ component-group  └─ state */
}
```

Apps可以在任意一层上覆盖. 状态第一层保持了与Tailwind的公用惯例一致的链接变量命名;组件第一层给予组件作者精确的控制点.

### 已知差距

`utilities.css`是因为 `@utility` 混合参考状态- 首个符号( e)`--bg-card`, (中文(简体) ), `--bg-modal`, (中文(简体) ), `--spacing-card`等),为: **没有** 定义 `theme-defaults.css`消费应用必须定义它们。 两只氯化萘 `src/scss/theme.css` 编辑 `@_linked/cli` 应用模板做到这一点。 如果您导入 `utilities.css` 没有应用程序定义的状态符号 `@utility` 混合到无声空值。 见后续构想: [文件/ideas/014-促进-cn-cs-toks-tons-cs-cs.md](https://github.com/create-now/docs) (单位:千美元) `create_now` 工作空间).

* * *

## 尾风 v4 对等依赖

此软件包声明 `tailwindcss: "^4"` 作为 `peerDependency`。链接的应用程序是围绕Tailwind v4构建的 - `theme-defaults.css` 用途 `@theme`, (中文(简体) ), `@theme static`, (中文(简体) ), `@source inline(...)`,以及 `--spacing()`· ; `utilities.css` 用途 `@utility`。这些指令没有 Tailwind v4. 在您的应用程序中安装 Tailwind v4

```bash
yarn add tailwindcss@^4 @tailwindcss/postcss@^4
```

(Linked-CLI的应用软件已经与Tailwind v4通过过境 `@_linked/cli`. ) (中文(简体) )

* * *

## 今后的想法

-   **`--focus-*` 编号 : `--disabled-*` 符号命名空间** —— 说 `@_linked/primitives` 后CSS搅拌机(`@define-mixin focus`, (中文(简体) ), `@define-mixin disabled`)但除此之外,这些状态没有语义符号 `--control-outline-*`添加 `--focus-bg`, (中文(简体) ), `--focus-ring-color`, (中文(简体) ), `--disabled-opacity` 等作为一个框架默认,组件作者可以共享一致的焦点/缺陷外观,而无需每个组件重新声明.
-   **暗模式框架默认** ——目前应用程序自有 `[data-theme='dark']` 每个符号的块。 传输默认的深色调色板 `theme-defaults.css` 将减少重复;应用程序只能覆盖特定品牌的暗值。 见思想 [013号](https://github.com/create-now/docs) D11 (延迟).
-   **Token 目录 / 搜索用户界面** – 交互式文件,其中列出每个已发送的有活实例的符号. 可以自动生成自 `theme-defaults.css`。 。 。 .
-   **调和 `--bg-*` (状态第一)与 `--*-bg` (构成部分一)** ——长期,文件一为被贬损或统一命名. 跟踪后续行动 [014 (英语)](https://github.com/create-now/docs)。 。 。 .

* * *

## 许可证

麻省理工学院.

## 常见问题

### @\_linked/css 是什么？

CSS 链接框架的变量、公用事业和主题默认

### 如何安装 @\_linked/css？

在项目目录运行 npm install @\_linked/css，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：tailwindcss（^4）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @\_linked/css 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/\_linked\_\_css 是否存在。

### @\_linked/css 可以商用吗？

@\_linked/css 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @\_linked/css 的下载量有多少？

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

### @\_linked/css 还在维护吗？

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