설치 · Tinyrack Design System

React 19 애플리케이션에서 Tailwind CSS 4.3 이상 5 미만과 Tinyrack UI를 설정하고, 테마가 적용된 주요 동작 버튼을 렌더링해요. 이미 쓰고 있는 Vite React 애플리케이션과 Node.js 24 이상이 필요해요.

1. 패키지 설치

pnpm add @tinyrack/ui react react-dom

2. Vite에 Tailwind CSS 추가

@tailwindcss/vite를 개발 의존성으로 설치하고 실제 Tailwind Vite 플러그인을 설정에 추가하세요.

pnpm add -D tailwindcss@^4.3.0 @tailwindcss/vite@^4.3.0

import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

3. CSS 순서 설정

Tailwind CSS를 먼저 불러오세요. 그다음 전역 진입점에서 core.css를 한 번 불러오고 모든 컴포넌트 스타일보다 앞에 두세요. 컴포넌트 JavaScript는 CSS를 자동으로 불러오지 않아요.

@import "tailwindcss";
@import "@tinyrack/ui/core.css";
@import "@tinyrack/ui/components/button.css";

4. 테마 선택

문서 루트에 data-theme="tinyrack-light"를 설정하세요. 어두운 인터페이스에는 기본 제공되는 tinyrack-dark를 사용할 수 있어요.

core.css는 선택한 테마의 --tinyrack-surface와 --tinyrack-text 색상을 html과 body에 적용해요. 페이지 캔버스에 다른 표현이 필요하면 나중에 불러오는 앱 CSS 규칙으로 재정의하세요.

<html data-theme="tinyrack-light">

5. 주요 동작 렌더링

공개 하위 경로에서 컴포넌트를 가져오고 intent로 동작의 의미를 나타내세요.

import { TRButton } from '@tinyrack/ui/components/button';

export function DeployButton() {
  return <TRButton intent="primary">변경 사항 배포</TRButton>;
}

결과 확인

Vite 개발 서버를 시작하세요. 버튼에 밝은 테마와 primary 스타일이 적용되고 키보드 포커스 표시가 보여야 해요. 스타일이 없다면 core.css가 button.css보다 앞에 있는지 확인하세요.

파운데이션에서 시스템 규칙을 이해하거나 Button에서 인터페이스를 만들어 보세요.

CI에서 디자인 시스템 강제하기

@tinyrack/ui에 포함된 검사기는 기본적으로 src와 app의 제품 코드를 확인해요.

pnpm exec tinyrack-ui-check
pnpm exec tinyrack-ui-check --format=github

시각 원시 값, p-4 같은 기본 Tailwind 디자인 유틸리티, Tinyrack 비공개 경로, 공개 TR 컴포넌트로 바꿀 수 있는 네이티브 컨트롤, 빠진 파운데이션·컴포넌트 CSS를 위반으로 처리해요. p-tinyrack-md 같은 Tinyrack 유틸리티와 공개 토큰을 사용하세요. 위반이 있으면 종료 코드 1, 설정이나 소스를 해석할 수 없으면 2를 반환해요.

기본 경로를 바꾸려면 프로젝트 루트에 tinyrack.check.json을 추가하세요.

{
  "include": ["packages/client/src/**"],
  "exclude": ["packages/client/src/generated/**"]
}

baseline 모드는 제공하지 않아요. 토큰으로 표현할 수 없는 구조적 값에는 규칙 ID와 검토할 수 있는 사유를 적은 다음 줄 예외만 사용할 수 있어요.

/* tinyrack-check-ignore-next-line tokens/no-literal -- 좌표는 차트 데이터에서 결정돼요 */
.plot-origin { left: 12px; }