API reference · Tailwind bridge

@oriatheme/tailwind

Statically maps oria-standard@2 runtime variables into the Tailwind CSS v4 @theme inline namespace.

Package and environment

Pure static CSS plus a generator; Tailwind CSS 4.3.3 is used only for its own build and tests, not as a consumer runtime dependency.

bash

pnpm add @oriatheme/tailwind

bash

npm install @oriatheme/tailwind

bash

yarn add @oriatheme/tailwind

bash

bun add @oriatheme/tailwind

Use the package manager and lockfile already chosen by the consumer project. Examples use package-root exports only; do not deep-import from src, dist, or registry templates.

CSS bridge

@oriatheme/tailwind/oria.css is the static @theme inline bridge for the default oria prefix: 43 colors, font families with nine weights, a 13-step text scale (text.md maps to --text-base with paired line heights), leading/tracking, --spacing, derived radius, shadow, blur, and --ease-oria-*, plus explicit backdrop-oria-*, duration-oria-*, inset-shadow-oria, shadow-highlight, bg-oria-canvas, and bg-oria-surface utilities.

css

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

Generator and custom prefixes

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 prefixes must be prebuilt into a static bridge; CSS variable names are never concatenated at runtime.

bash

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