Utility Class Demo

Tailwind CSS の utility class を、実際の shadcn/ui コンポーネントと一緒に確認できるページです。

方針

このリポジトリでは、色は CSS 変数（例: `bg-background` / `text-foreground`）を使う前提です。固定色（例: `text-red-500`）よりも、テーマトークン優先でデモしています。

1) レイアウト（Flex / Grid）

`flex`, `grid`, `gap-*`, `items-*`, `justify-*` は UI レイアウトの基礎です。 Tabs で見比べられるようにしています。

Flex と Grid の比較

Badge

例: `flex flex-wrap items-center justify-between gap-3`

Position（位置指定）

`static` / `relative` / `absolute` / `fixed` / `sticky`、`inset-*`、 `top/*` / `left/*` / `right/*` / `bottom/*`、`z-*` の使い方を確認します。

Position Utilities

absolute

親に `relative`、子に `absolute` を指定

`relative` + `absolute top-2 right-2`

sticky header

内部でスクロールさせて sticky を確認

`sticky top-0`

fixed

ビューポートに対して固定される要素（`fixed`）

`fixed bottom-4 left-4`

Inset 例: inset-0

`inset-0 / inset-y-0 / inset-x-0`

Z-index（スタッキング例）

`z-10 / z-20 / z-30`

位置ユーティリティ例: top-2 left-2

`top-2 left-2 right-4 bottom-4`

2) スペーシング（margin / padding）

`p-*`, `m-*`, `space-x-*`, `space-y-*` は密度感を作る最重要ユーティリティです。

Padding の違い

p-2 / p-4 / p-6

p-2

p-4

p-6

<div className="p-2" />
<div className="p-4" />
<div className="p-6" />

space-* の違い

space-y-2 / space-y-4

space-y-2

item

space-y-4

item

<div className="space-y-2">...</div>
<div className="space-y-4">...</div>

3) タイポグラフィ

`text-*`, `font-*`, `leading-*`, `tracking-*`, `truncate` の基本をまとめています。

サイズ / 太さ / 行間

text-xs

text-sm

text-base font-medium

text-lg font-semibold

leading-7（行間を広めにして読みやすく）

<p className="text-xs" />
<p className="text-lg font-semibold" />
<p className="leading-7" />

truncate（1行省略）

横幅を決めて、省略表示を確認します

とても長いテキストです。横幅が足りない場合は省略されます。

w-56 + truncate

<p className="w-56 truncate">...long text...</p>

4) カラー（テーマトークン）

このプロジェクトの色は CSS 変数で管理され、Tailwind の `bg-*` / `text-*` で参照します。 `ring-foreground` も同様に使えます。

代表トークン

background

bg-background text-foreground

card

bg-card text-card-foreground

popover

bg-popover text-popover-foreground

primary

bg-primary text-primary-foreground

muted

bg-muted text-muted-foreground

ring

text-ring-foreground bg-ring

例: `bg-ring text-ring-foreground`（`--ring` / `--ring-foreground` を参照）

5) ボーダー / 角丸 / Ring

`border`, `rounded-*`, `ring-*` は入力やフォーカスの視認性に直結します。

角丸の違い

rounded-sm

rounded-md

rounded-lg

rounded-sm / rounded-md / rounded-lg

Ring（フォーカスの例）

`focus-visible:ring-2 focus-visible:ring-ring`

<Input className="focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" />

6) 状態（hover / disabled / group）

`hover:*`, `disabled:*`, `group-hover:*` を使うと、UI の状態表現を簡潔に書けます。

hover / active

hover badge

hover:bg-muted active:scale-[0.99] disabled:opacity-50

group-hover

Hover me

サブテキスト

group-hover

.group ... group-hover:bg-primary group-hover:text-primary-foreground

7) 表（Table）

`text-*`, `whitespace-nowrap`, `w-*`, `text-right` などの utility が効く代表例です。

Utility と相性の良い UI

Class	目的	例
gap-*	要素間隔	`gap-2`, `gap-4`
truncate	1行省略	`truncate`
sm:*	レスポンシブ	`sm:grid-cols-2`
focus-visible:*	キーボード操作時の可視性	`focus-visible:ring-2`

8) まとめ（よく使う型）

頻出パターンを Accordion でまとめています。ここをテンプレとして流用できます。

Class

目的

例

gap-*

要素間隔

`gap-2`, `gap-4`

truncate

1行省略

`truncate`

sm:*

レスポンシブ

`sm:grid-cols-2`

focus-visible:*

キーボード操作時の可視性

`focus-visible:ring-2`

方針

1) レイアウト（Flex / Grid）

Position（位置指定）

2) スペーシング（margin / padding）

3) タイポグラフィ

4) カラー（テーマトークン）

5) ボーダー / 角丸 / Ring

6) 状態（hover / disabled / group）

7) 表（Table）

8) まとめ（よく使う型）

フォーム行（label + input）

情報パネル（カード風）

方針

1) レイアウト（Flex / Grid）

Position（位置指定）

2) スペーシング（margin / padding）

3) タイポグラフィ

4) カラー（テーマトークン）

5) ボーダー / 角丸 / Ring

6) 状態（hover / disabled / group）

7) 表（Table）

8) まとめ（よく使う型）

フォーム行（label + input）

情報パネル（カード風）