{"id":51445110,"url":"https://github.com/torifo/tailwind-jp-blueprint","last_synced_at":"2026-07-05T15:30:39.241Z","repository":{"id":364707648,"uuid":"1234646337","full_name":"torifo/tailwind-jp-blueprint","owner":"torifo","description":"Tailwind CSS 標準化テンプレート — 何を揃えるか・何を揃えないかを整理した最小構成のデザインシステム","archived":false,"fork":false,"pushed_at":"2026-06-14T05:23:42.000Z","size":23,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-14T07:15:43.334Z","etag":null,"topics":["blueprint","color","css","design","design-system","frontend","html","japanese","javascript","learning","reference","shell","standard","starter-kit","tailwind-css","template","tool","typography","ui-kit","utility"],"latest_commit_sha":null,"homepage":"https://torifo.github.io/tailwind-jp-blueprint/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/torifo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-10T13:09:32.000Z","updated_at":"2026-06-14T05:23:46.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/torifo/tailwind-jp-blueprint","commit_stats":null,"previous_names":["torifo/tailwind-jp-blueprint"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/torifo/tailwind-jp-blueprint","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Ftailwind-jp-blueprint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Ftailwind-jp-blueprint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Ftailwind-jp-blueprint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Ftailwind-jp-blueprint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/torifo","download_url":"https://codeload.github.com/torifo/tailwind-jp-blueprint/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Ftailwind-jp-blueprint/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35160046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-05T02:00:06.290Z","response_time":100,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blueprint","color","css","design","design-system","frontend","html","japanese","javascript","learning","reference","shell","standard","starter-kit","tailwind-css","template","tool","typography","ui-kit","utility"],"created_at":"2026-07-05T15:30:39.014Z","updated_at":"2026-07-05T15:30:39.231Z","avatar_url":"https://github.com/torifo.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tailwind Design System — 標準化テンプレート\n\nTailwind CSS は強力なユーティリティファーストフレームワークですが、あくまで**標準化のための道具**です。このテンプレートは、プロジェクト全体で一貫させるべき要素を最小限に形式化し、デザインの個性や表現力が必要な部分はあえて自由に残す構成を取っています。\n\n**何を揃えるか**と**何を揃えないか**を意識することが、このテンプレートの中心的な考え方です。\n\n---\n\n## クイックスタート\n\n新しいプロジェクトのルートで以下のいずれかを実行すると、`tailwind.config.js` と `global.css` がセットアップされます。既存ファイルがある場合は上書き・追記・スキップをインタラクティブに選択できます。\n\n### npx（推奨）\n\nNode.js 18 以上があればインストール不要で即実行できます。\n\n```sh\nnpx tailwind-jp-blueprint\n```\n\n\u003e npm 未公開の場合は GitHub から直接実行できます:\n\u003e ```sh\n\u003e npx github:torifo/tailwind-jp-blueprint\n\u003e ```\n\n### curl\n\n```sh\ncurl -fsSL https://raw.githubusercontent.com/torifo/tailwind-jp-blueprint/main/install.sh | sh\n```\n\n既存の CSS ファイルに追記するだけの場合:\n\n```sh\ncurl -fsSL https://raw.githubusercontent.com/torifo/tailwind-jp-blueprint/main/example/global.css \u003e\u003e src/styles/global.css\n```\n\n### ファイルを直接取得\n\n```sh\ncurl -O https://raw.githubusercontent.com/torifo/tailwind-jp-blueprint/main/example/tailwind.config.js\ncurl -O https://raw.githubusercontent.com/torifo/tailwind-jp-blueprint/main/example/global.css\n```\n\n### git sparse-checkout（example ディレクトリのみ取得）\n\n```sh\ngit clone --depth 1 --filter=blob:none --sparse https://github.com/torifo/tailwind-jp-blueprint\ncd tailwind-jp-blueprint \u0026\u0026 git sparse-checkout set example\n```\n\n---\n\n### 既存の Tailwind プロジェクトへの統合\n\n| 状況 | 対応 |\n| :--- | :--- |\n| `tailwind.config.js` がある | `npx` 実行時に `[m]` を選択 → 表示された内容を既存 config の `extend` に手動でマージ |\n| `global.css` がある | `npx` 実行時に `[a]` を選択 → CSS 変数ブロックを末尾に追記 |\n| CSS ファイル名が異なる | `curl` で取得して手動でペースト |\n\n---\n\n## ファイル構成\n\n```\nexample/\n├── tailwind.config.js   # テーマ定義（色・フォント・アニメーション・ブレークポイント）\n└── global.css           # CSS変数の実値（ライト／ダークモード対応）\nindex.html               # インタラクティブなリファレンスページ\n```\n\n### `example/tailwind.config.js`\n\nデザインシステムの「設計図」。セマンティックカラー・フォントスタック・シャドウ・アニメーション・ブレークポイントを定義します。色の実値は直接書かず、`global.css` の CSS変数を参照する形式にすることで、テーマ変更をこの2ファイルだけで完結させます。\n\n新しいプロジェクトを始める際は、このファイルをそのままコピーして使います。\n\n### `example/global.css`\n\nCSS変数の実値を集約する「定義値ファイル」。`:root` にライトモードの値、`.dark` にダークモードの値を記述します。色を変えたい場合はここだけ編集すれば全体に反映されます。\n\nまた、日本語テキストの禁則処理・折り返し・フォントレンダリングなど、`@layer base` で設定すべきグローバルな HTML/要素スタイルもここで管理します。\n\n### `index.html`\n\nこのデザインシステム自体を題材にしたリファレンスページ。カラートークン・フォント・シャドウ・アニメーションをすべてライブで確認でき、「標準化された領域」と「意図的に形式化しない領域」の全体像を把握できます。\n\n---\n\n## 標準化された領域\n\n`tailwind.config.js` と `global.css` で定義した、プロジェクト全体の一貫性を担う要素群です。\n\n### A. カラーシステム（セマンティック命名）\n\n生の色名（`blue-500`）ではなく、**役割ベースのセマンティック名**で定義します。\n\n```js\n// tailwind.config.js\ncolors: {\n  brand: {\n    primary:   'var(--color-primary)',    // メインカラー\n    secondary: 'var(--color-secondary)', // 補助色\n    accent:    'var(--color-accent)',    // アクセント\n  },\n  surface: {\n    base:     'var(--color-bg-base)',     // ページ背景\n    sunken:   'var(--color-bg-sunken)',   // 少し沈んだ背景\n    elevated: 'var(--color-bg-elevated)', // 浮き上がった背景（カード等）\n  },\n  content: {\n    main:    'var(--color-text-main)',    // メイン文字色\n    muted:   'var(--color-text-muted)',  // 補助文字色\n    inverse: 'var(--color-text-inverse)', // 反転文字色\n  },\n},\n```\n\nCSS変数の実値は `global.css` に集約されており、変数一行を変えるだけで全コンポーネントに反映されます。\n\n| トークン | ライトモード | ダークモード |\n| :--- | :--- | :--- |\n| `--color-bg-base` | `#ffffff` | `#0f172a` |\n| `--color-bg-sunken` | `#f8fafc` | `#020617` |\n| `--color-text-main` | `#0f172a` | `#f8fafc` |\n| `--color-text-muted` | `#64748b` | `#94a3b8` |\n\n### B. タイポグラフィ\n\n日英混在の環境を考慮した3段階のフォントスタックです。\n\n| キー | フォントスタック | 用途 |\n| :--- | :--- | :--- |\n| `font-sans` | Inter, Hiragino Sans, Noto Sans JP | 通常テキスト全般 |\n| `font-mono` | JetBrains Mono | コード・数値表示 |\n| `font-display` | （未指定・差し替えスロット） | テーマ・装飾フォント |\n\n`font-display` は個性的なフォントを差し込む専用スロットとして確保しています。プロジェクトごとに自由に設定します。\n\n### C. シャドウ\n\nモダンデザインの「浮き感」を表現する2段階のシャドウです。\n\n| クラス名 | 用途 |\n| :--- | :--- |\n| `shadow-soft` | カード・インプット・サブ要素（主張しない浮き感） |\n| `shadow-elevated` | モーダル・ドロップダウン・CTA ボタン |\n\n### D. アニメーション\n\n汎用的に使い回せるコアアニメーション3種です。\n\n| クラス名 | タイミング | 説明 |\n| :--- | :--- | :--- |\n| `animate-fade-in` | 0.3s · ease-out | フェードイン |\n| `animate-slide-up` | 0.4s · cubic-bezier(0.16,1,0.3,1) | 下から滑り上がる |\n| `animate-blob` | 7s · infinite | border-radius がゆらゆら変形する背景用 |\n\n### E. ブレークポイント\n\nTailwind 標準値をそのまま採用。モバイルファースト設計を前提とします。\n\n| プレフィックス | 最小幅 |\n| :--- | :--- |\n| `sm:` | 640px |\n| `md:` | 768px |\n| `lg:` | 1024px |\n| `xl:` | 1280px |\n| `2xl:` | 1536px |\n\n### F. ダークモード\n\n`darkMode: 'class'` を採用。`html` 要素への `.dark` クラスの付け外しで全体が切り替わります。OS設定の自動追従も `prefers-color-scheme` の検出を挟めば対応可能です。\n\n```js\ndocument.documentElement.classList.toggle('dark');\n```\n\n---\n\n## 意図的に形式化しない領域\n\nTailwind は標準化の道具です。しかし、デザインにおける**個性・らしさ・表現力**はそもそも形式化できるものではありません。以下の要素はあえて `config` に収めず、必要な場所でその都度書くことを推奨します。\n\n### 1. 一過性のレイアウト調整\n\n特定の場所だけで必要な微調整は、任意値（Arbitrary Values）構文でその場に書きます。config に登録すると再利用されない値がファイルを汚します。\n\n```html\n\u003c!-- ✓ その場で書く --\u003e\n\u003cdiv class=\"top-[13px] left-[5%] w-[calc(100%-2rem)]\"\u003e\n\n\u003c!-- ✗ 一回しか使わない値を config に登録しない --\u003e\n```\n\n### 2. 複雑なグラデーション\n\nユーティリティの組み合わせ、またはインラインスタイルの方が意図を正確に表現できます。\n\n```html\n\u003c!-- ✓ ユーティリティの組み合わせ --\u003e\n\u003cdiv class=\"bg-gradient-to-br from-blue-500/20 via-purple-500/10 to-transparent\"\u003e\n\n\u003c!-- ✓ 複雑な場合はインラインスタイル --\u003e\n\u003cdiv style=\"background: radial-gradient(circle at 30% 40%, #3b82f620, transparent 60%)\"\u003e\n```\n\n### 3. 特定ページ専用の装飾\n\n全体で使い回さないパーツ（キャンペーンバナー・LPのヒーロー装飾など）は標準化の対象外です。コンポーネント内で完結させます。\n\n### 4. デザインの「らしさ」を作る要素\n\n手書き風・コミック風・エディトリアルな組版など、**そのデザインの個性を形作る部分**は、Tailwind の標準化レイヤーに収めるべきではありません。Tailwind は「道具箱」であり「作風」ではないからです。\n\n| テーマ例 | Tailwind だけでは足りない部分 | 実装のアプローチ |\n| :--- | :--- | :--- |\n| 手書き風 | 不規則な境界線・ガタガタした線 | SVG フィルター + 歪んだ `borderRadius` の多用 |\n| コミック風 | 極太の枠線・二重オフセット影・スクリーントーン背景 | `box-shadow` の多重定義 + カスタム背景画像 |\n| 共通 | 独特なフォント（世界観の大半を決める） | Google Fonts から `font-display` として読み込み Config で紐付け |\n\n\u003e Tailwind で土台を整えつつ、らしさを表現する部分は自由に書き込む。この分担がデザインシステムとしての柔軟性を保ちます。\n\n---\n\n## メンテナンスの指針\n\n| やりたいこと | 触る場所 |\n| :--- | :--- |\n| 色を変えたい | `global.css` の CSS変数を書き換える |\n| 新しいフォントを追加したい | `tailwind.config.js` の `fontFamily` にキーを追加する |\n| 汎用アニメーションを追加したい | `tailwind.config.js` の `animation` / `keyframes` に追加する |\n| 一度しか使わないアニメーション | HTML 側で `animate-[...]` のインライン記述を使う |\n\n---\n\n## リファレンスページ\n\n`index.html` を開くと、このデザインシステムのすべての要素をインタラクティブに確認できます。\n\n- カラートークンの全スウォッチ（ライト／ダーク切り替え対応）\n- フォントスタックのプレビュー\n- シャドウのライブデモ\n- アニメーション3種のループ再生\n- ブレークポイントのビジュアルガイド\n- 意図的に形式化しない領域のコード例\n\n---\n\n## Install as a skill / スキルとして導入\n\nThis repo also ships a cross-agent **`SKILL.md`** (open standard) usable by both Claude Code and Codex CLI as a design-system skill. Link the repo into the agent's skills directory:\n\nこのリポジトリは Claude Code / Codex CLI 共通の **`SKILL.md`**（オープン標準）も同梱し、デザインシステム・スキルとして使えます。\n\n```bash\n# Claude Code\nln -s \"$(pwd)\" ~/.claude/skills/tailwind-design-system\n# Codex CLI\nln -s \"$(pwd)\" ~/.codex/skills/tailwind-design-system\n```\n\nRestart the agent; it is matched automatically by the skill's `description` (skill name: `tailwind-design-system`). / エージェント再起動後、`description` に基づき自動マッチします。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftorifo%2Ftailwind-jp-blueprint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftorifo%2Ftailwind-jp-blueprint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftorifo%2Ftailwind-jp-blueprint/lists"}