설치

소비 프로젝트는 Next.js 16 + Tailwind v4 환경을 가정해요. 아래 네 단계면 끝나요.

1. 레지스트리 인증 (.npmrc)

GITHUB_TOKEN 은 read:packages 권한이 있는 토큰이에요.

ini

@openiot:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

2. 설치

bash

npm i @openiot/ui @openiot/tokens

3. Tailwind 연결 (app/globals.css)

@source 가 핵심이에요. Tailwind 는 기본적으로 node_modules 를 스캔하지 않아서, 이 줄이 있어야 컴포넌트 클래스(bg-brand-500 등)가 생성돼요.

css

@import "tailwindcss";
@import "@openiot/tokens/styles.css";        /* 디자인 토큰(@theme) */
@source "../node_modules/@openiot/ui/dist";  /* 컴포넌트 클래스 스캔 */

4. 다크 모드

최상위 <html> 에 .dark 클래스를 토글하면 시맨틱 토큰이 전환돼요. 클래스 기반 dark: 유틸을 쓰려면 아래 한 줄을 추가하세요.

css

@custom-variant dark (&:where(.dark, .dark *));