UITailwind UI Samples
Tailwind CSS v4 + React

業務で使える UI を、
動くサンプルで学ぶ。

ボタン・フォーム・カード・レイアウトからアニメーション、メニューまで。プレビューで触って、コードをコピーしてそのまま使えます。

サンプルを見る →Tailwind 公式ドキュメント ↗
▦

Components30

ボタン・フォーム・カード・テーブル・レイアウトなど、業務アプリの基本 UI。

見る →

◌

Animations12

transition・keyframes・スクロール連動など、動きの付け方。

見る →

❐

Overlays & Menus10

ドロップダウン・ツールチップ・ドロワー・コマンドパレットなど、重なる UI。

見る →

部品 → 組み合わせ の順で学ぶ

まず src/components/ui の小さな部品（7 個）を読み、次にそれを組み合わせたサンプルを見ると、クラスの意味と使いどころが同時にわかります。

  1. 1Preview で動きを触り、幅を Mobile / Tablet に切り替えてレスポンシブを確認
  2. 2Code タブでサンプル本体と、使っている部品のソースをタブで読む
  3. 3公式ドキュメントのリンクで、使われているユーティリティを深掘り
  4. 4Copy してプロジェクトに貼り、色や余白を変えてみる
ButtonCardBadgeInput / FieldAvatarSwitchAlert公式：Styling with utility classes ↗ユーティリティクラスの考え方・状態（hover / focus）・レスポンシブ・ダークモードの基本がまとまっています。