インストール · 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 開発サーバーを起動してください。ボタンにライトテーマと主要アクションのスタイルが適用され、キーボードフォーカスが表示されます。スタイルが適用されない場合は、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 やコンポーネント 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; }