https://github.com/torifo/tailwind-jp-blueprint

Tailwind CSS 標準化テンプレート — 何を揃えるか・何を揃えないかを整理した最小構成のデザインシステム
https://github.com/torifo/tailwind-jp-blueprint

blueprint color css design design-system frontend html japanese javascript learning reference shell standard starter-kit tailwind-css template tool typography ui-kit utility

Last synced: about 17 hours ago
JSON representation

Tailwind CSS 標準化テンプレート — 何を揃えるか・何を揃えないかを整理した最小構成のデザインシステム

Host: GitHub
URL: https://github.com/torifo/tailwind-jp-blueprint
Owner: torifo
Created: 2026-05-10T13:09:32.000Z (about 2 months ago)
Default Branch: main
Last Pushed: 2026-06-14T05:23:42.000Z (22 days ago)
Last Synced: 2026-06-14T07:15:43.334Z (22 days ago)
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
Language: HTML
Homepage: https://torifo.github.io/tailwind-jp-blueprint/
Size: 22.5 KB
Stars: 0
Watchers: 0
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Tailwind Design System — 標準化テンプレート

Tailwind CSS は強力なユーティリティファーストフレームワークですが、あくまで**標準化のための道具**です。このテンプレートは、プロジェクト全体で一貫させるべき要素を最小限に形式化し、デザインの個性や表現力が必要な部分はあえて自由に残す構成を取っています。

**何を揃えるか**と**何を揃えないか**を意識することが、このテンプレートの中心的な考え方です。

---

## クイックスタート

新しいプロジェクトのルートで以下のいずれかを実行すると、`tailwind.config.js` と `global.css` がセットアップされます。既存ファイルがある場合は上書き・追記・スキップをインタラクティブに選択できます。

### npx（推奨）

Node.js 18 以上があればインストール不要で即実行できます。

```sh
npx tailwind-jp-blueprint
```

> npm 未公開の場合は GitHub から直接実行できます:
> ```sh
> npx github:torifo/tailwind-jp-blueprint
> ```

### curl

```sh
curl -fsSL https://raw.githubusercontent.com/torifo/tailwind-jp-blueprint/main/install.sh | sh
```

既存の CSS ファイルに追記するだけの場合:

```sh
curl -fsSL https://raw.githubusercontent.com/torifo/tailwind-jp-blueprint/main/example/global.css >> src/styles/global.css
```

### ファイルを直接取得

```sh
curl -O https://raw.githubusercontent.com/torifo/tailwind-jp-blueprint/main/example/tailwind.config.js
curl -O https://raw.githubusercontent.com/torifo/tailwind-jp-blueprint/main/example/global.css
```

### git sparse-checkout（example ディレクトリのみ取得）

```sh
git clone --depth 1 --filter=blob:none --sparse https://github.com/torifo/tailwind-jp-blueprint
cd tailwind-jp-blueprint && git sparse-checkout set example
```

---

### 既存の Tailwind プロジェクトへの統合

---

## ファイル構成

```
example/
├── tailwind.config.js # テーマ定義（色・フォント・アニメーション・ブレークポイント）
└── global.css # CSS変数の実値（ライト／ダークモード対応）
index.html # インタラクティブなリファレンスページ
```

### `example/tailwind.config.js`

デザインシステムの「設計図」。セマンティックカラー・フォントスタック・シャドウ・アニメーション・ブレークポイントを定義します。色の実値は直接書かず、`global.css` の CSS変数を参照する形式にすることで、テーマ変更をこの2ファイルだけで完結させます。

新しいプロジェクトを始める際は、このファイルをそのままコピーして使います。

### `example/global.css`

CSS変数の実値を集約する「定義値ファイル」。`:root` にライトモードの値、`.dark` にダークモードの値を記述します。色を変えたい場合はここだけ編集すれば全体に反映されます。

また、日本語テキストの禁則処理・折り返し・フォントレンダリングなど、`@layer base` で設定すべきグローバルな HTML/要素スタイルもここで管理します。

### `index.html`

このデザインシステム自体を題材にしたリファレンスページ。カラートークン・フォント・シャドウ・アニメーションをすべてライブで確認でき、「標準化された領域」と「意図的に形式化しない領域」の全体像を把握できます。

---

## 標準化された領域

`tailwind.config.js` と `global.css` で定義した、プロジェクト全体の一貫性を担う要素群です。

### A. カラーシステム（セマンティック命名）

生の色名（`blue-500`）ではなく、**役割ベースのセマンティック名**で定義します。

```js
// tailwind.config.js
colors: {
brand: {
primary: 'var(--color-primary)', // メインカラー
secondary: 'var(--color-secondary)', // 補助色
accent: 'var(--color-accent)', // アクセント
},
surface: {
base: 'var(--color-bg-base)', // ページ背景
sunken: 'var(--color-bg-sunken)', // 少し沈んだ背景
elevated: 'var(--color-bg-elevated)', // 浮き上がった背景（カード等）
},
content: {
main: 'var(--color-text-main)', // メイン文字色
muted: 'var(--color-text-muted)', // 補助文字色
inverse: 'var(--color-text-inverse)', // 反転文字色
},
},
```

CSS変数の実値は `global.css` に集約されており、変数一行を変えるだけで全コンポーネントに反映されます。

| トークン | ライトモード | ダークモード |
| :--- | :--- | :--- |
| `--color-bg-base` | `#ffffff` | `#0f172a` |
| `--color-bg-sunken` | `#f8fafc` | `#020617` |
| `--color-text-main` | `#0f172a` | `#f8fafc` |
| `--color-text-muted` | `#64748b` | `#94a3b8` |

### B. タイポグラフィ

日英混在の環境を考慮した3段階のフォントスタックです。

`font-display` は個性的なフォントを差し込む専用スロットとして確保しています。プロジェクトごとに自由に設定します。

### C. シャドウ

モダンデザインの「浮き感」を表現する2段階のシャドウです。

### D. アニメーション

汎用的に使い回せるコアアニメーション3種です。

### E. ブレークポイント

Tailwind 標準値をそのまま採用。モバイルファースト設計を前提とします。

| プレフィックス | 最小幅 |
| :--- | :--- |
| `sm:` | 640px |
| `md:` | 768px |
| `lg:` | 1024px |
| `xl:` | 1280px |
| `2xl:` | 1536px |

### F. ダークモード

`darkMode: 'class'` を採用。`html` 要素への `.dark` クラスの付け外しで全体が切り替わります。OS設定の自動追従も `prefers-color-scheme` の検出を挟めば対応可能です。

```js
document.documentElement.classList.toggle('dark');
```

---

## 意図的に形式化しない領域

Tailwind は標準化の道具です。しかし、デザインにおける**個性・らしさ・表現力**はそもそも形式化できるものではありません。以下の要素はあえて `config` に収めず、必要な場所でその都度書くことを推奨します。

### 1. 一過性のレイアウト調整

特定の場所だけで必要な微調整は、任意値（Arbitrary Values）構文でその場に書きます。config に登録すると再利用されない値がファイルを汚します。

```html

```

### 2. 複雑なグラデーション

ユーティリティの組み合わせ、またはインラインスタイルの方が意図を正確に表現できます。

```html

```

### 3. 特定ページ専用の装飾

全体で使い回さないパーツ（キャンペーンバナー・LPのヒーロー装飾など）は標準化の対象外です。コンポーネント内で完結させます。

### 4. デザインの「らしさ」を作る要素

手書き風・コミック風・エディトリアルな組版など、**そのデザインの個性を形作る部分**は、Tailwind の標準化レイヤーに収めるべきではありません。Tailwind は「道具箱」であり「作風」ではないからです。

> Tailwind で土台を整えつつ、らしさを表現する部分は自由に書き込む。この分担がデザインシステムとしての柔軟性を保ちます。

---

## メンテナンスの指針

---

## リファレンスページ

`index.html` を開くと、このデザインシステムのすべての要素をインタラクティブに確認できます。

- カラートークンの全スウォッチ（ライト／ダーク切り替え対応）
- フォントスタックのプレビュー
- シャドウのライブデモ
- アニメーション3種のループ再生
- ブレークポイントのビジュアルガイド
- 意図的に形式化しない領域のコード例

---

## Install as a skill / スキルとして導入

This 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:

このリポジトリは Claude Code / Codex CLI 共通の **`SKILL.md`**（オープン標準）も同梱し、デザインシステム・スキルとして使えます。

```bash
# Claude Code
ln -s "$(pwd)" ~/.claude/skills/tailwind-design-system
# Codex CLI
ln -s "$(pwd)" ~/.codex/skills/tailwind-design-system
```

Restart the agent; it is matched automatically by the skill's `description` (skill name: `tailwind-design-system`). / エージェント再起動後、`description` に基づき自動マッチします。

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/torifo/tailwind-jp-blueprint

Awesome Lists containing this project

README