@ 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它在已出版的软件包内,所以消费者总是可以读到 node_modules/@frontiers/tailwind-plugin/AGENTS.md其中还包括: 从法格玛 将图形样式名称 1: 1 映射到公用设施,以便通过图片MCP进行设计.

安装

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

# 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 文件的所有文件 :

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

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

模块导入

只导入您需要的 :

@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 设计系统一致的断点 :

* 电梯设施

以 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 - 元素上方的浅色阴影

实例

使用打字工具

<!-- 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>

使用电梯

<!-- 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>

使用原始颜色

<!-- 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 主题:

<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>

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

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

<!-- 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>

暗模式支持

<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 颜色系统的指令 :

@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 工具的主题——不重建,不 复制调色板 :

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-数字 :

<!-- 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:

见 AGENTS.md 从法格玛 用于完整转换表(计分调色板、灰色/表面和语义符号)和彩色提示.

* 用于完整、始终准确的每份清单 f-*, (中文(简体) ), elevation-*,颜色和断点符号,见 AGENTS.md。 。 。 .

保存代理目录

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,重新生成它:

# 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):

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

字体家族

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

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

字体堆栈 :

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

框架整合

Vue 3 / 坚果

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

反应 / Next.js

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

维特

/* 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 主题预设 .

许可证

公务员制度委员会

作者

亚历克西斯·雷纳