Tailwind
Design
System
最低限の標準化されたデザインへ、論理的でメンテナンス性の高いフロントエンド設計のための標準化ガイド。 標準化すべき要素と、あえて形式化しない領域を明確に整理します。
標準化された領域
tailwind.config.js と
global.css
で定義された、プロジェクト全体の一貫性を担う要素群。これらが「デザインの文法」となります。
カラーシステム
生の色名（blue-500）ではなく役割ベースのセマンティック名で定義。
CSS変数を介して Tailwind クラスと紐付けるため、デザイン変更は
global.css の変数一行だけで全体に伝播します。
タイポグラフィ
日英混在の現実を考慮した3段階のフォントスタック。
font-sans /
font-mono /
font-display
で用途を使い分けます。display スロットは強いテーマデザイン用の差し替え口です。
シャドウ
モダンデザインの「浮き感」を表現する2段階のシャドウ定義。 ダークモード時は自動的に強度が変わります（右上のトグルで確認できます）。
0 10px 10px -5px rgba(0,0,0,0.04)
アニメーション
サイトの「性格」を決めるコアアニメーション3種。ループ再生で動きを確認できます。
汎用的なものを config に登録し、
クラス名 animate-fade-in 等で使用します。
ブレークポイント
モバイルファースト設計。sm: から始め、
大きな画面に向けてスタイルを上書きしていくアプローチ。Tailwind の標準値を継承しています。
ダークモード戦略
darkMode: 'class' を採用。
JavaScript から html 要素に
.dark を付け外しするだけで全体が切り替わります。
意図的に
形式化しない領域
すべてを config
に詰め込むとファイルが肥大化し、柔軟性が失われます。
以下の要素は「その場のコード」で書くべき領域として意図的に残しています。形式化しないことが表現力を守ります。
特定の場所だけで必要な微調整。Tailwind の任意値（Arbitrary Values）構文でその場に書きます。 config に登録すると、再利用されない値でファイルが汚れるうえ、他のパーツにも波及するリスクがあります。
方向・色数・透明度が複雑に組み合わさるグラデーションは、ユーティリティの直接組み合わせか インラインスタイルの方が直感的です。セマンティクスよりビジュアルの正確さが優先されます。
キャンペーンバナー・LP のヒーロー装飾・期間限定プロモーション要素など、全体で使い回さないパーツは 標準化の対象外です。必要な場所にそのまま書き、デザインシステムを汚染しません。
Tailwind は「道具箱」であり「作風」ではありません。手書き風・コミック風などの世界観は Tailwind 単体では実現できず、別途追加実装が必要です。
| テーマ | Tailwind だけでは無理な部分 | 実装アプローチ |
|---|---|---|
| 手書き風 | 完全に不規則な境界線・ガタガタした線 | SVG フィルター + 歪んだ borderRadius の多用 |
| コミック風 | 極太の枠線・二重オフセット影・スクリーントーン背景 | box-shadow の多重定義 + カスタム背景画像 |
| 共通 | 独特なフォント（世界観の7割を決める） | Google Fonts から font-display として読み込み Config で紐付け |
なぜ形式化しないか：
手書き風の美しさは「不規則であること」が源泉です。config で「標準の角丸」として定義すると、
すべてのパーツが同じ歪み方になり、デジタルで不自然な印象になります。
推奨アプローチ：
「土台はモダンな Tailwind 設定で作りつつ、テーマパーツだけを自由に書き込む」スタイルが最も表現力が高くなります。
メンテナンスの指針
「何を変えたい時に、どこを触るか」を3つのルールで整理します。 このシステムに沿って運用すれば、変更の影響範囲が常に予測可能になります。
font-* として使えます。animate-[...] でインライン記述します。