Tailwind 참고

설정

Tinyrack을 사용하는 애플리케이션에 Tailwind CSS 4.3 이상 5 미만과 Vite 플러그인을 설치하세요.

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

애플리케이션의 Vite 설정에 플러그인을 추가하세요.

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

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

Tailwind를 먼저 불러오고 Tinyrack 핵심 CSS를 이어서 불러오세요. 사용하는 컴포넌트 스타일시트는 각각 따로 불러오세요.

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

값 선택

1. 색상, 타이포그래피, 간격, 모서리 반경, 고도, 모션처럼 디자인 시스템의 결정을 나타내는 값에는 이름이 있는 tinyrack-* 유틸리티를 선택하세요.
2. grid나 grid-cols-2처럼 디자인 시스템과 무관한 일반 레이아웃에는 Tailwind 기본 유틸리티를 선택하세요. Tinyrack 뷰포트 임계값에는 sm:, md:, lg:를 사용해요.
3. 실제 컴포넌트 변수나 일회성 CSS 값에 이름 있는 유틸리티가 없을 때만 임의 값을 선택하세요. 별도의 토큰 체계를 만들지 마세요.

실전 예시

이 카드는 시스템 결정에 이름 있는 Tinyrack 유틸리티를 사용하고 레이아웃에는 Tailwind 기본 유틸리티를 사용해요. 위 설정을 마치면 그대로 붙여 넣을 수 있어요.

export function ClusterHealth() {
  return (
    <section className="grid gap-tinyrack-lg rounded-tinyrack-lg border-tinyrack-default border-tinyrack-border bg-tinyrack-surface p-tinyrack-xl md:grid-cols-2">
      <h2 className="text-tinyrack-xl font-tinyrack-heading">클러스터 상태</h2>
      <p className="text-tinyrack-sm text-tinyrack-text-muted">
        모든 노드를 사용할 수 있어요.
      </p>
    </section>
  );
}

임의 값

공개 컴포넌트 변수에 이름이 있는 Tailwind 유틸리티가 없으면 임의 사용자 정의 속성으로 재정의하세요. 계산된 값을 복사하지 말고 시맨틱 토큰을 기준값으로 유지해요. 예를 들어 Card는 --tr-card-background를 재정의 훅으로 사용해요.

import { TRCard } from '@tinyrack/ui/components/card';

<TRCard.Root className="[--tr-card-background:var(--tinyrack-surface-muted)]">
  ...
</TRCard.Root>

참고표

Tinyrack 소스 core.css의 @theme static 블록에서 읽은 매핑을 검색할 수 있어요. 각 그룹은 개념을 설명하는 파운데이션 가이드로 연결돼요. 좁은 화면에서는 페이지 너비를 늘리지 않고 각 표만 가로로 스크롤할 수 있어요.