API 참조 · Tailwind 브리지

@oriatheme/tailwind

oria-standard@2 런타임 변수를 Tailwind CSS v4 @theme 인라인 네임스페이스에 정적으로 매핑합니다.

패키지 및 환경

순수 정적 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

소비자 프로젝트에서 이미 선택한 패키지 관리자와 잠금 파일을 사용하세요. 예제에서는 패키지 루트 내보내기만 사용합니다. src, dist 또는 레지스트리 템플릿에서 깊이 가져오지 마세요.

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

생성기 및 사용자 정의 접두사

수출	서명	설명
`generateOriaTailwindBridge`	`(options?: { prefix?: string }) => string`	검증된 사용자 정의 접두사에 대한 정적 브리지를 생성합니다.
`oriaTailwindBridgeDefaultPrefix`	`"oria"`	패키지된 oria.css에서 사용되는 접두사입니다.

사용자 정의 접두사는 정적 브리지에 사전 구축되어야 합니다. CSS 변수 이름은 런타임에 연결되지 않습니다.

bash

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