# Tailwind CSS

## 概要

Tailwind CSS は、カスタムUIを迅速に構築するためのユーティリティ優先CSSフレームワークです。v4ではTypeScriptとRustのハイブリッド構成を採用し、JITコンパイルによる高速なCSS生成、CSS カスタムプロパティとの統合、複数ビルドツール対応（Vite, webpack, PostCSS, CLI）を実現しています。pnpm + Turbo によるモノレポ構成で管理されています。

## 主な機能

| 機能カテゴリ | 説明 |
| --- | --- |
| ユーティリティクラス生成 | 100以上のユーティリティクラスをJITコンパイルで動的に生成し、使用クラスのみをCSSに出力 |
| デザインシステム | カラーパレット、タイポグラフィ、スペーシング、ブレークポイント等のカスタマイズ可能なデザイントークン管理 |
| バリアント（修飾子） | `hover:`, `focus:`, `sm:`, `md:`, `dark:`, `group-*:` 等のレスポンシブ・インタラクション修飾子 |
| ディレクティブ | `@apply`（ユーティリティ適用）、`@import`（CSS結合）、`@variant`（カスタムバリアント）、`@theme`（テーマ定義） |
| プラグインシステム | カスタムユーティリティの追加やプリセット共有が可能な拡張API |
| ビルドツール統合 | Vite, webpack, PostCSS プラグイン、CLIツール、ブラウザグローバルに対応 |
| ソースマップ生成 | デバッグ用のソースマップ完全サポート |
| v3互換性レイヤー | v3設定・プラグインAPI・カラーパレットとの下位互換を提供 |
| アップグレードツール | v3からv4への自動マイグレーションツール（tree-sitterベースの構文解析） |

## 技術スタック

### コア

- 言語: TypeScript, Rust
- CSSエンジン: lightningcss v1.31.1（Rust実装のCSSパーサー/コンパイラ）
- Node-API: napi-rs（RustとNode.jsのバインディング）
- 並列処理: rayon（Rustマルチスレッド）

### 主要ライブラリ

- PostCSS v8.5.6 - CSSトランスフォーメーション
- jiti - ESM/CJS動的ローダー
- enhanced-resolve - モジュール解決
- @parcel/watcher - 高速ファイル監視
- magic-string - ソースマップ対応の文字列操作
- @jridgewell/remapping - ソースマップ再マッピング
- @alloc/quick-lru - LRUキャッシュ
- tree-sitter - 構文解析（アップグレードツール用）

### 開発ツール

- パッケージマネージャー: pnpm v9.6.0
- ビルドオーケストレーション: Turbo v2.7.6
- バンドラー: tsup v8.5.1
- テスト: Vitest v4.0.18, Playwright v1.58.0
- フォーマッター: Prettier v3.8.1
- 型チェック: TypeScript v5.5.4
- スタンドアロンビルド: Bun v1.3.9

## ディレクトリ構成

```
tailwindcss-main/
├── packages/                          # JavaScript/TypeScript パッケージ
│   ├── tailwindcss/                   # メインフレームワーク (v4.2.1)
│   │   ├── src/                       # ソースコード
│   │   │   ├── index.ts               # メインエントリーポイント
│   │   │   ├── plugin.ts              # プラグインAPI
│   │   │   ├── ast.ts                 # AST操作
│   │   │   ├── candidate.ts           # クラス名候補解析
│   │   │   ├── css-parser.ts          # CSSパーサー
│   │   │   ├── design-system.ts       # デザインシステム
│   │   │   ├── utilities.ts           # ユーティリティ生成
│   │   │   ├── variants.ts            # バリアント処理
│   │   │   ├── theme.ts              # テーマシステム
│   │   │   ├── apply.ts              # @apply ディレクティブ
│   │   │   ├── at-import.ts          # @import 処理
│   │   │   ├── compat/               # v3互換性レイヤー
│   │   │   └── source-maps/          # ソースマップ処理
│   │   ├── tests/                     # テストファイル
│   │   └── dist/                      # ビルド出力
│   ├── @tailwindcss-browser/          # ブラウザグローバル実装
│   ├── @tailwindcss-cli/              # CLIツール
│   │   └── src/commands/              # サブコマンド
│   ├── @tailwindcss-node/             # Node.js API
│   ├── @tailwindcss-postcss/          # PostCSSプラグイン
│   ├── @tailwindcss-vite/             # Viteプラグイン
│   ├── @tailwindcss-webpack/          # Webpackローダー
│   ├── @tailwindcss-upgrade/          # v3→v4アップグレードツール
│   └── @tailwindcss-standalone/       # スタンドアロンCLI
├── crates/                            # Rust crates
│   ├── oxide/                         # Rustコア実装（クラス抽出・グロブ）
│   │   └── src/extractor/             # クラス名抽出器
│   ├── node/                          # Node-APIバインディング
│   │   └── npm/                       # プラットフォーム別バイナリ
│   ├── classification-macros/         # Rustマクロ定義
│   └── ignore/                        # ファイル無視パターン処理
├── integrations/                      # ビルドツール統合テスト
│   ├── cli/                           # CLIテスト
│   ├── postcss/                       # PostCSSテスト
│   ├── vite/                          # Viteテスト
│   └── webpack/                       # Webpackテスト
├── playgrounds/                       # デモプロジェクト
│   ├── vite/                          # Viteデモ
│   └── nextjs/                        # Next.jsデモ
├── scripts/                           # ビルド・リリーススクリプト
├── patches/                           # npmパッチファイル
├── pnpm-workspace.yaml                # モノレポワークスペース定義
├── turbo.json                         # Turboビルド設定
├── vitest.config.ts                   # テスト設定
├── Cargo.toml                         # Rustワークスペース設定
└── package.json                       # ルートパッケージ設定
```

## セットアップ

### 必要条件

- Node.js
- Rust（rustup経由）
- pnpm v9.6.0

### インストール手順

```bash
# 依存関係のインストール
pnpm install

# Rustツールチェーンのセットアップ
rustup default stable
rustup target add wasm32-wasip1-threads

# プロジェクトのビルド
pnpm build
```

## 開発

### テスト

```bash
# ウォッチモードでテスト実行（開発時推奨）
pnpm tdd

# 全テスト実行（Cargo + Vitest）
pnpm test

# 統合テスト実行
pnpm build && pnpm test:integrations

# UIテスト実行（Playwright）
pnpm build && pnpm test:ui

# ベンチマーク
pnpm bench
```

### フォーマット・リント

```bash
# コード整形チェック（Prettier + TypeScript型チェック）
pnpm lint

# 自動フォーマット
pnpm format
```

### デモサーバー

```bash
# Viteデモ起動
pnpm build && pnpm vite

# Next.jsデモ起動
pnpm build && pnpm nextjs
```
