API 参考 · Tailwind bridge

@oriatheme/tailwind

把 oria-standard@2 的运行时变量静态映射进 Tailwind CSS v4 的 @theme inline namespace。

包与运行环境

纯静态 CSS 与生成器；Tailwind CSS 4.3.3 仅用于其构建与测试，不是使用方运行时依赖。

bash

pnpm add @oriatheme/tailwind

bash

npm install @oriatheme/tailwind

bash

yarn add @oriatheme/tailwind

bash

bun add @oriatheme/tailwind

选择使用方项目已有的一种包管理器和 lockfile；示例只使用 package root export，不要从 src、dist 或 registry template 深层导入。

CSS bridge

@oriatheme/tailwind/oria.css 是默认 oria 前缀的静态 @theme inline bridge：43 项颜色、字体与九级字重、13 级 text scale（text.md 映射为 --text-base 并附配对行高）、leading/tracking、--spacing、派生 radius、shadow、blur 与 --ease-oria-*，另提供 backdrop-oria-*、duration-oria-*、inset-shadow-oria、shadow-highlight、bg-oria-canvas 与 bg-oria-surface 显式 utilities。

css

@import "tailwindcss";
@import "@oriatheme/colors/styles.css";
@import "@oriatheme/colors/tailwind.css";
@import "@oriatheme/tailwind/oria.css";

生成器与 custom prefix

Export	Signature	Description
`generateOriaTailwindBridge`	`(options?: { prefix?: string }) => string`	Generates a static bridge for a validated custom prefix.
`oriaTailwindBridgeDefaultPrefix`	`"oria"`	The prefix used by the packaged oria.css.

custom prefix 必须在构建期生成静态 bridge；运行时不会拼接 CSS 变量名。

bash

oria theme tailwind-bridge --prefix acme --out src/oria-tailwind.css