# @frontiers/tailwind-plugin 中文文档

规范地址：https://npmcn.com/package/%40frontiers/tailwind-plugin/

版本：1\.2\.2
npm 元数据更新时间：2026-06-22T08:52:44.782Z
中文译文更新时间：2026-11-15T15:05:02.514Z
软件包许可：ISC

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

原始 npm 页面：https://www.npmjs.com/package/%40frontiers/tailwind-plugin
原文对照：https://npmcn.com/package/%40frontiers/tailwind-plugin/?lang=original
项目主页：https://github.com/frontiersin/primeuix/tree/main/packages/tailwind-plugin#readme
源码仓库：https://github.com/frontiersin/primeuix

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

- 包体积（解压后）：64 kB，8 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：tailwindcss \>=4\.0\.0，@primeuix/themes \>=1\.0\.0，tailwindcss-primeui \>=0\.3\.0
- 首次发布：2025-10-24T10:45:44.714Z
- 最新版本发布：2026-06-22T08:52:44.602Z
- 近 30 天下载量：8259（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：7（近 12 个月 4 个）

## 中文简介

Tailwind CSS 4 插件,用于扩展尾风- primeui 和 PrimeVue 组件的自定义工具以及 @ frontiers/ prime- preset 主题

## 安装

```sh
npm install @frontiers/tailwind-plugin
```

也可以使用：`pnpm add @frontiers/tailwind-plugin`、`yarn add @frontiers/tailwind-plugin`、`bun add @frontiers/tailwind-plugin`

## README

# @ frontiers/ 尾风插座

延伸的 Tailwind CSS 4 插件 **尾风先锋** 与自定义公用事业,并将PrimeVue设计符与Tailwind的公用事业类系统无缝地融合.

## 概览

此插件 **延伸尾风- primeui** 并旨在与 **PrimeVue 组件** 编辑 **@ frontiers/ preme - preset** 主题。 它与 Tailwind CSS 4 连接了 PrimeVue 的颜色系统,允许您在 Tailwind 工具类中直接使用 PrimeVue 的主题颜色. 它将所有的PrimeVue彩色调色板(绿色,红色,灰色,紫色,青色,橙色,蓝色)映射到Tailwind的彩色系统,提供自定义的打字和高地公用功能,并设定Museo Sans为默认的sans-serif字体.

### 目的

-   **扩展尾风- primeui** - 在PrimeUI Tailwind插件上再加添公用事业
-   **PrimeVue 整合** - 专门设计,用于PrimeVue组件
-   **边框 主题** - 与 @ frontiers/ prime- preset 主题无缝工作,用于 PrimeVue
-   **Brink 设计系统公用事业** - 从Brink设计系统增加72个打字和50个高架设施,改编为Tailwind 4型设施

> **使用人工智能代理/LLM?** 本套件(所有打字、高程、彩色和断点符号)中每个功能的完整、自动生成的目录都位于 [`AGENTS.md`](https://npmcn.com/package/%40frontiers/tailwind-plugin/AGENTS.md)它在已出版的软件包内,所以消费者总是可以读到 `node_modules/@frontiers/tailwind-plugin/AGENTS.md`其中还包括: **从法格玛** 将图形样式名称 1: 1 映射到公用设施,以便通过图片MCP进行设计.

## 安装

安装插件及其对等依赖性 :

```bash
# Install all required dependencies
pnpm add @frontiers/tailwind-plugin tailwindcss-primeui @primeuix/themes

# Install PrimeVue and the Frontiers theme preset
pnpm add primevue @frontiers/prime-preset
```

**说明:** 此插件扩展 `tailwindcss-primeui` 并设计与 PrimeVue 组件一起使用 `@frontiers/prime-preset` 主题.

## 使用量

### 完全导入( Theme + 类型)

导入您主 CSS 文件的所有文件 :

```css
@import "tailwindcss";
@import "@frontiers/tailwind-plugin";
```

此导入主题( 颜色和字体) 、 打印工具、 高深阴影 .

### 模块导入

只导入您需要的 :

```css
@import "tailwindcss";

/* Theme only (PrimeVue colors + Museo Sans font) */
@import "@frontiers/tailwind-plugin/theme";

/* Typography only (72 utility classes) */
@import "@frontiers/tailwind-plugin/typography";

/* Elevation only (50 shadow utilities) */
@import "@frontiers/tailwind-plugin/elevation";

/* Or import selectively */
@import "@frontiers/tailwind-plugin/theme";
@import "@frontiers/tailwind-plugin/typography";
@import "@frontiers/tailwind-plugin/elevation";
```

## 特征

### \* 字型设备

以 **Brink 设计系统**,改编为 Tailwind 4 公用事业,用于一致的文本样式:

-   **标题** (单位:千美元)`f-heading-*`\- 6个尺寸(xs-2xl),每个重3个(轻,半粗,粗)
-   **显示** (单位:千美元)`f-display-*`\- 6个尺寸(xs-2xl)并有2个重(轻,半粗)
-   **体质** (单位:千美元)`f-body-*`\- 4个大小(sm-xl),并有正线和高线高度
-   **标签** (单位:千美元)`f-label-*`\- 有2个重量的4个尺寸(xs-lg)
-   **按钮** (单位:千美元)`f-button-*`\- 3个尺寸(sm-lg),粗体(700)
-   **链接** (单位:千美元)`f-link-*`) - 2 个大小( sm, md), 粗体 (700); 也可作为复数别名使用 `f-links-*` 数字符号-名称等同
-   **引号** (单位:千美元)`f-quote-*`\- 2个尺寸(sm, lg)
-   **流体标题** (单位:千美元)`f-fluid-heading-*`\- 与取景口相适应的打字法

**共计:72个打字工具类** (来自Brink设计系统;包括2个复数) `f-links-*` 别名)

### QQ 主色调集成

所有 PrimeVue 颜色调色板被映射到 Tailwind :

-   **绿色** (单位:千美元)`green-50` 结束 `green-950`(中文(简体) )
-   **红色** (单位:千美元)`red-50` 结束 `red-950`(中文(简体) )
-   **灰色** (单位:千美元)`gray-50` 结束 `gray-950`(中文(简体) )
-   **紫色** (单位:千美元)`purple-50` 结束 `purple-950`(中文(简体) )
-   **青色** (单位:千美元)`cyan-50` 结束 `cyan-950`(中文(简体) )
-   **橙红色** (单位:千美元)`orange-50` 结束 `orange-950`(中文(简体) )
-   **蓝色** (单位:千美元)`blue-50` 结束 `blue-950`(中文(简体) )

### 自定义字体

设定 **博物馆** 作为默认 sans-serif 字体家族.

### 响应断点

自定义与 Brink 设计系统一致的断点 :

| 断点 | 大小 | 像素 | 使用大小写 |
| --- | --- | --- | --- |
| `sm` | `40rem` | `640px` | 移动景观 |
| `md` | `48rem` | `768px` | 平板电脑 |
| `lg` | `64rem` | `1024px` | 小型笔记本电脑 |
| `xl` | `80rem` | `1280px` | 桌面 |
| `2xl` | `90rem` | `1440px` | 大桌面 |
| `3xl` | `120rem` | `1920px` | 额外的大屏幕 / 1080p |

### \* 电梯设施

以 **Brink 设计系统**,改编为Tailwind 4用于深度和高地效应的公用事业:

-   **光影** (单位:千美元)`elevation-light-*`\- 浅色主题的暗影
-   **黑暗阴影** (单位:千美元)`elevation-dark-*`\- 突出的阴影

**职位:** `top`, (中文(简体) ), `center`, (中文(简体) ), `bottom`, (中文(简体) ), `right`, (中文(简体) ), `left`  
**强度 :** `10`, (中文(简体) ), `20`, (中文(简体) ), `30`, (中文(简体) ), `40`, (中文(简体) ), `50` (增加深度)

**共计:50个高地公用事业类别** (来自布林克设计系统)

示例类名称 :

-   `elevation-light-bottom-20` - 元素下方的光影
-   `elevation-dark-center-30` - 元素周围的黑暗阴影
-   `elevation-light-top-10` - 元素上方的浅色阴影

## 实例

### 使用打字工具

```html
<!-- Headings -->
<h1 class="f-heading-2xl-bold">Main Heading</h1>
<h2 class="f-heading-xl-semibold">Section Heading</h2>
<h3 class="f-heading-lg">Subsection</h3>

<!-- Display Text (Hero sections) -->
<h1 class="f-display-xl-semibold">Large Hero Title</h1>
<p class="f-display-xs">Impressive subtitle</p>

<!-- Body Text -->
<p class="f-body-lg">Large body text for readability</p>
<p class="f-body-md-tall">Regular body with comfortable line height</p>
<p class="f-body-sm">Small descriptive text</p>

<!-- Labels -->
<label class="f-label-md-semibold">Form Label</label>
<span class="f-label-sm">Helper text</span>

<!-- Buttons -->
<button class="f-button-lg bg-blue-500 text-white px-6 py-3">
  Large Button
</button>

<!-- Links -->
<a href="#" class="f-link-md text-blue-600">Medium Link</a>

<!-- Fluid Typography (Responsive) -->
<h1 class="f-fluid-heading-2xl">
  Scales from 1.5rem on mobile to 2.5rem on large screens
</h1>
```

### 使用电梯

```html
<!-- Light Shadows (for light backgrounds) -->
<div class="bg-white elevation-light-bottom-20 rounded-lg p-6">
  Card with subtle bottom shadow
</div>

<!-- Dark Shadows (for emphasis) -->
<div class="bg-white elevation-dark-center-30 rounded-lg p-6">
  Card with pronounced shadow
</div>

<!-- Directional Shadows -->
<div class="bg-white elevation-light-right-20 rounded-lg p-6">
  Shadow on the right side
</div>

<div class="bg-white elevation-light-top-10 rounded-lg p-6">
  Subtle shadow above (inverted)
</div>

<!-- Different Intensities -->
<div class="bg-white elevation-light-bottom-10 rounded-lg p-4">Light</div>
<div class="bg-white elevation-light-bottom-30 rounded-lg p-4">Medium</div>
<div class="bg-white elevation-light-bottom-50 rounded-lg p-4">Heavy</div>
```

### 使用原始颜色

```html
<!-- Background colors -->
<div class="bg-green-500 text-white">Success message</div>
<div class="bg-red-500 text-white">Error message</div>
<div class="bg-blue-500 text-white">Info message</div>

<!-- Text colors -->
<p class="text-purple-600">Purple text</p>
<p class="text-cyan-500">Cyan text</p>
<p class="text-orange-700">Orange text</p>

<!-- Border colors -->
<div class="border border-gray-300">Bordered content</div>
<div class="border-2 border-green-500">Green border</div>

<!-- Hover states -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2">
  Hover me
</button>
```

### 使用 PrimeVue 组件

此插件设计为无缝工作 **PrimeVue 组件** 编辑 **@ frontiers/ preme - preset** 主题:

```vue
<template>
  <div class="p-6">
    <!-- PrimeVue components styled with custom typography -->
    <h1 class="f-heading-2xl-bold mb-6">Dashboard</h1>

    <!-- PrimeVue Button with Tailwind utilities -->
    <Button label="Primary" class="mr-2" />

    <!-- PrimeVue Card with elevation utilities -->
    <Card class="elevation-light-bottom-20">
      <template #title>
        <h2 class="f-heading-lg-semibold text-gray-900">Card Title</h2>
      </template>
      <template #content>
        <p class="f-body-md text-gray-600">
          Using PrimeVue components with @frontiers/prime-preset theme and
          custom Tailwind utilities from this plugin!
        </p>
      </template>
    </Card>
  </div>
</template>

<script setup>
// Using @frontiers/prime-preset theme
import { usePrimeVue } from "primevue/config"
import FrontiersPreset from "@frontiers/prime-preset"

const PrimeVue = usePrimeVue()
PrimeVue.config.theme = {
  preset: FrontiersPreset,
}
</script>
```

### 用自定义断点进行响应设计

使用自定义断点进行响应布局 :

```html
<!-- Color changes at each breakpoint -->
<div
  class="bg-blue-500 md:bg-green-500 lg:bg-purple-500 xl:bg-cyan-500 2xl:bg-orange-500 3xl:bg-red-500 text-white p-4">
  Colors change at different breakpoints
</div>

<!-- Responsive typography -->
<h1 class="f-heading-md sm:f-heading-lg md:f-heading-xl lg:f-heading-2xl-bold">
  Responsive heading
</h1>

<!-- Responsive grid layout -->
<div
  class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5 gap-4">
  <!-- Grid items -->
</div>

<!-- Container widths -->
<div
  class="w-full lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl 3xl:max-w-7xl mx-auto">
  Content container
</div>
```

### 暗模式支持

```html
<div class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  Adapts to dark mode
</div>
```

## 如何运作

该插件使用 Tailwind CSS 4's `@theme inline` 将 PrimeVue CSS 自定义属性映射到 Tailwind 颜色系统的指令 :

```css
@theme inline {
  --color-green-500: var(--p-green-500);
  --color-red-500: var(--p-red-500);
  /* ... and so on for all colors */
}
```

这意味着:

-   QQ 颜色与您的 PrimeVue 主题同步
-   QQ 颜色的单一真理源
-   \* 使用有PrimeVue设计系统的Tailwind公用事业
-   没有重复的颜色定义

因为现场的颜色决定了 `--p-*` 变量,切换 PrimeVue 运行时自动更新每个 Tailwind 工具的主题——不重建,不 复制调色板 :

```ts
import { usePrimeVue } from "primevue/config"

const PrimeVue = usePrimeVue()
// Every `bg-*` / `text-* `/ `border-*` utility using these palettes follows the new theme.
PrimeVue.changeTheme("current-theme", "new-theme", "theme-link")
```

## 使用提示和最佳做法

### 类型

-   到达一个单一 `f-*` 类而不是堆叠 `text-* font-* leading-*`。 。 。 .
-   使用 `f-body-md` 编号 : `f-body-lg` 用于大多数运行中的文本; 使用 `-tall` 长式段落的变体.
-   使用 `f-fluid-heading-*` 当一个方向应该横跨断点时.
-   `semibold` 为强调, `bold` 大力强调.

### 颜色

-   喜欢 **语义符号** 从预设( n)`primary`, (中文(简体) ), `surface`)用于主题感知UI;使用命名调色板(`green`, (中文(简体) ), `red`.),用于固定意图.
-   阴影导线 : `50–200` 为背景, `300–500` 为边界, `600–900` 用于文本.
-   Hover/Active:去一个阴影更暗 在悬浮,两个在Active.
-   永远不要硬码十六进制值( N)`bg-[#22c55e]`当一个符号存在时.

### 电梯

-   强度引导 : `10` 徘徊状态 `20` 牌/座椅 `30` 滴入( p).. `40` 模式对话框( a) `50` 最大深度(覆盖).
-   位置引导 : `bottom` 用于大多数牌/浮动元素 `center` o 模式/中心重叠 `top` 粘性头部的倒影 `right`编号 :`left` 用于侧边栏和滑出面板.
-   使用 `light` 深处的阴影, `dark` 用于强调的阴影;配对 `rounded-lg`编号 :`rounded-xl`。 。 。 .

### 从 Figma (设计到代码)

UX团队维持了这些原始人作为Figma风格. 执行设计时 **图片MCP**,将图片样式映射到公用事业,而不是复制原始CSS.

-   **地图1:1** ——该类为Figma风格名前缀 `f-`数字 :

```html
<!-- Figma style "heading-2xl-bold"  -->
<h1 class="f-heading-2xl-bold">…</h1>
<!-- Figma style "body-md-tall"      -->
<p class="f-body-md-tall">…</p>
<!-- Figma style "label-sm-semibold" -->
<span class="f-label-sm-semibold">…</span>
<!-- Figma style "link-md" (plural f-links-md also works) -->
<a class="f-link-md underline">…</a>
<!-- "…-underline" Figma styles = compose with Tailwind `underline` -->
```

-   **升降图1:1** ——使用匹配 `elevation-{mode}-{position}-{intensity}` 级,不是生的 `box-shadow`。 。 。 .
-   **颜色不映射 1:1** —— Figma使用UX调色板步骤(`0`– 说吧 –`90`)有不同的值,所以一个相克阴影数字是 **没有** 相同的尾风号( 图) `…/50` → `…-600`) (中文(简体) ). 永远不要复制 Figma 十六进制或阴影号; 转换,然后按意图绘制地图: 品牌填充 ~ `bg-primary`,近白背景 → `bg-surface-0`,正文文本 − `text-surface-900`边界 + `border-surface-200`。 。 。 .

方案调色板转换( E)`blue`, (中文(简体) ), `red`, (中文(简体) ), `orange`, (中文(简体) ), `purple`, (中文(简体) ), `green`, (中文(简体) ), `cyan`:

| 图片 | `0` | `5` | `10` | `20` | `30` | `40` | `50` | `55` | `60` | `70` | `80` | `90` |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| 脚本 | `50` | `100` | `200` | `300` | `400` | `500` | `600` | —— 说 | `700` | `800` | `900` | `950` |

见 [`AGENTS.md`](https://npmcn.com/package/%40frontiers/tailwind-plugin/AGENTS.md) **从法格玛** 用于完整转换表(计分调色板、灰色/表面和语义符号)和彩色提示.

> \* 用于完整、始终准确的每份清单 `f-*`, (中文(简体) ), `elevation-*`,颜色和断点符号,见 [`AGENTS.md`](https://npmcn.com/package/%40frontiers/tailwind-plugin/AGENTS.md)。 。 。 .

## 保存代理目录

[`AGENTS.md`](https://npmcn.com/package/%40frontiers/tailwind-plugin/AGENTS.md) 由源 CSS 生成(`src/theme.css`, (中文(简体) ), `src/typography.css`, (中文(简体) ), `src/elevation.css`作者: `scripts/generate-catalog.mjs`,所以它永远不能从公用设施漂流 包船。 它承诺的Repo(同时 `README.md` 编号 : `CHANGELOG.md`和船舶在 `node_modules/@frontiers/tailwind-plugin/AGENTS.md`。 。 。 .

当你改变公用事业在 `src/*.css`,重新生成它:

```bash
# Regenerates AGENTS.md from src/*.css
pnpm build
```

> **说明:** 这是一个 CSS 唯一的软件包—— 它发布 `src/` 直接(无建筑文物). `pnpm build` 只会重生承诺 `AGENTS.md`; 将结果与您的 CSS 更改同步执行 .

## 所需资源

-   **尾风 CSS** >= 4.0.0
-   **@ primeuix/ 主题** 1.0.0(提供 `--p-*` CSS 变量)
-   **尾风先锋** & 0. 3. 0 (PrimeUI Tailwind CSS 插件)

## 颜色参考

所有颜色都遵循标准的 Tailwind 比例尺 (50-950):

| 调色板 | 类 | 主变量 |
| --- | --- | --- |
| 绿色 | `green-50` 改为 `green-950` | `--p-green-*` |
| 红色 | `red-50` 改为 `red-950` | `--p-red-*` |
| 灰色 | `gray-50` 改为 `gray-950` | `--p-gray-*` |
| 紫色 | `purple-50` 改为 `purple-950` | `--p-purple-*` |
| 青色 | `cyan-50` 改为 `cyan-950` | `--p-cyan-*` |
| 橙红色 | `orange-50` 改为 `orange-950` | `--p-orange-*` |
| 蓝色 | `blue-50` 改为 `blue-950` | `--p-blue-*` |

每个调色板有11个阴影:50个,100个,200个,300个,400个,500个,600个,700个,800个,900个,950个

## 字体家族

插件将 Museo Sans 设置为默认的 sans-serif 字体 :

```html
<p class="font-sans">This text uses Museo Sans</p>
```

字体堆栈 :

```
"Museo Sans", "MuseoSans", ui-sans-serif, system-ui, sans-serif, ...
```

## 框架整合

### Vue 3 / 坚果

```vue
<!-- app.vue or nuxt.config.ts -->
<style>
@import "tailwindcss";
@import "@frontiers/tailwind-plugin";
</style>
```

### 反应 / Next.js

```css
/* app/globals.css */
@import "tailwindcss";
@import "@frontiers/tailwind-plugin";
```

### 维特

```css
/* src/main.css */
@import "tailwindcss";
@import "@frontiers/tailwind-plugin";
```

## 福利

1.  **扩展尾风- primeui** - 在基础PrimeUI插件上再加添公用事业
2.  **前沿设计系统** - 为@frontiers/prime- preset主题和PrimeVue组件所设计
3.  **Brink 设计系统公用事业** - 72个打字机和50个从Brink设计系统升起的公用设备,转换为Tailwind 4公用设备
4.  **一致设计** - 对PrimeVue组件和Tailwind公用事业使用相同的颜色
5.  **主题集成** - 当您更改 PrimeVue 主题时自动更新颜色
6.  **开发者经验** - 有PrimeVue颜色的熟悉 Tailwind语法
7.  **无重复** - 颜色值的单一真理来源(来自 @frontiers/prime- preset)
8.  **0 运行时间** - 纯CSS,没有 JavaScript 间接费用

## 解决问题

### 颜色不显示 ?

确保:

1.  您使用的是 Tailwind CSS v4.0+
2.  @ primeuix/ 主题已安装和配置
3.  安装了尾风- primeui
4.  PrimeVue CSS 变量 (`--p-*`)在您的应用程序中可用
5.  插件已导入 **之后** 尾风在你的CSS

### 颜色与预期不同?

颜色来自您的 PrimeVue 主题配置 。 要改变颜色, 请更新您的 PrimeVue 主题预设 .

## 许可证

公务员制度委员会

## 作者

亚历克西斯·雷纳

## 常见问题

### @frontiers/tailwind-plugin 是什么？

Tailwind CSS 4 插件,用于扩展尾风- primeui 和 PrimeVue 组件的自定义工具以及 @ frontiers/ prime- preset 主题

### 如何安装 @frontiers/tailwind-plugin？

在项目目录运行 npm install @frontiers/tailwind-plugin，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：tailwindcss（\>=4\.0\.0）、@primeuix/themes（\>=1\.0\.0）、tailwindcss-primeui（\>=0\.3\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @frontiers/tailwind-plugin 支持 TypeScript 吗？

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

### @frontiers/tailwind-plugin 支持 ESM 还是 CommonJS？

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

### @frontiers/tailwind-plugin 可以商用吗？

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

### @frontiers/tailwind-plugin 的下载量有多少？

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

### @frontiers/tailwind-plugin 还在维护吗？

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