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 ブロックから生成されたマッピングを検索できます。各グループから概念を説明する基礎ガイドへ移動できます。狭い画面ではページ幅を広げず、各テーブルだけを横にスクロールできます。