tailwind-css

Tailwind CSS（v4）

概要

Tailwind CSS はユーティリティファーストの CSS フレームワークです。マークアップ内で単一の用途に特化したクラスを組み合わせてスタイルを設定します。

Tailwind v4 のみを使用します。 tailwind.config.js、tailwind.config.ts、tailwind.config.mjs はありません。設定は、@import "tailwindcss" と @theme ディレクティブを使って CSS 内で行い、Vite または PostCSS プラグインを使用します。

• エントリ：@import "tailwindcss"; を記述したメイン CSS ファイルを 1 つ用意します
• ビルド：@tailwindcss/vite（Vite）または @tailwindcss/postcss（Next.js）
• テーマ：同じ CSS ファイル（またはインポートした CSS）内の @theme { ... }。JS 設定はありません。

基本原則：マークアップ内ではユーティリティクラスを優先し、必要に応じて @theme とカスタム CSS で拡張します。tailwind.config.* や、設定ファイル内の content／theme を提案または作成しないでください。

---

インストール

Next.js（App Router、15 以上）

1. 必要に応じてプロジェクトを作成します：create-next-app@latest — Next.js のドキュメントを参照してください。
2. パッケージを追加します：tailwindcss、@tailwindcss/postcss、postcss（パッケージマネージャーを使用）。
3. プロジェクトのルートに postcss.config.mjs を作成します：

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

4. ./app/globals.css に記述します：

@import "tailwindcss";

5. 開発用スクリプトを実行します（例：package.json の dev）。

React／TSX では className を使用します（例：app/page.tsx 内）：

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  );
}

app/globals.css が app/layout.tsx にインポートされていることを確認します（Create Next App ではデフォルトで設定されています）。

Vite（React、Vue、Qwik など）

1. パッケージを追加します：tailwindcss、@tailwindcss/vite（パッケージマネージャーを使用）。
2. vite.config.ts に記述します：

import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss(), /* ... */],
})

3. メイン CSS（例：src/index.css）：@import "tailwindcss";

Tailwind CLI（単体）

1. パッケージを追加します：tailwindcss、@tailwindcss/cli（パッケージマネージャーを使用）。
2. メイン CSS：@import "tailwindcss";
3. ビルド：@tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch（パッケージマネージャー経由で実行します）。

---

Tailwind の使用

• マークアップ内でユーティリティクラスを使用します：React／Next.js では className、Qwik／Vue では class。
• 可能な場合は、任意の値よりデザイントークン（テーマ）を優先します。
• 関連するユーティリティをまとめて、読みやすくします（レイアウト → 余白 → タイポグラフィ → 色 → 効果）。

例：text-3xl font-bold underline、flex items-center gap-4、p-6 rounded-xl bg-white shadow-lg、max-w-sm mx-auto。

---

テーマ：@theme のみ（設定ファイルなし）

CSS 内でのみ使用します。 @import "tailwindcss" と同じファイル内（またはそのファイルからインポートされる CSS 内）で @theme を使用します。

デフォルトテーマの拡張

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 120rem;
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
}

使用例：font-display、3xl:、bg-avocado-500、ease-fluid。

デフォルト値の上書き

@theme 内で変数を再定義して上書きします：

@theme {
  --breakpoint-sm: 30rem;
}

テーマ変数の名前空間（クイックリファレンス）

名前空間	用途	例
--color-*	色	bg-*, text-*, border-*
--font-*	フォントファミリー	font-sans、font-mono
--text-*	フォントサイズ	text-xl、text-base
--font-weight-*	フォントウェイト	font-bold
--breakpoint-*	レスポンシブバリアント	sm:、md:、lg:
--spacing-*	余白／サイズ	p-4、gap-2、m-6
--radius-*	角丸	rounded-lg
--shadow-*	ボックスシャドウ	shadow-md
--ease-*	トランジションのタイミング	ease-out
--animate-*	アニメーション	animate-spin

他の変数の参照

トークンから別の変数を参照する場合は、@theme inline を使用します：

@theme inline {
  --font-sans: var(--font-inter);
}

カスタムキーフレーム

--animate-* で使用できるように、@theme 内でキーフレームを定義します：

@theme {
  --animate-fade-in-scale: fade-in-scale 0.3s ease-out;
  @keyframes fade-in-scale {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
  }
}

テーマのその他のオプション（名前空間全体の上書き、カスタムテーマ、プロジェクト間での共有）については、reference.md を参照してください。

---

カスタムスタイル

プレーン CSS

カスタム CSS は、@import "tailwindcss" と同じファイル、またはインポートするファイルに追加します。

@import "tailwindcss";

.my-custom-style {
  /* ... */
}

ベースレイヤー

要素のデフォルトスタイルには @layer base を使用します。

@layer base {
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
}

コンポーネントレイヤー

再利用可能なコンポーネント風のクラスには @layer components を使用します（必要に応じてユーティリティで上書きできます）。

@layer components {
  .card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-xl);
  }
}

カスタムユーティリティ：@utility

シンプルなユーティリティ：

@utility content-auto {
  content-visibility: auto;
}

複雑なユーティリティ（例：スクロールバーを非表示にする）：

@utility scrollbar-hidden {
  &::-webkit-scrollbar {
    display: none;
  }
}

カスタムバリアント：@variant

カスタム CSS 内で @variant を使用します。

.my-element {
  background: white;
  @variant dark {
    background: black;
  }
}

または、@custom-variant で名前付きバリアントを登録します。

@custom-variant theme-midnight (&:where([data-theme="midnight"] *));

その後、theme-midnight:bg-black のように使用します。

---

任意の値とプロパティ

• 任意の値：top-[117px]、bg-[#bada55]、text-[22px]、lg:top-[344px]。
• 任意の値での CSS 変数：fill-(--my-brand-color)（fill-[var(--my-brand-color)] の短縮形）。
• 任意のプロパティ：[mask-type:luminance]、[--scroll-offset:56px]。
• 値内の空白：空白の代わりにアンダースコア _ を使用します。例：grid-cols-[1fr_500px_2fr]。
• 曖昧さ：型ヒントを使用します。例：text-(length:--my-var) と text-(color:--my-var)。

---

互換性

• ブラウザー：Tailwind v4 は最新のブラウザー（Chrome 111+、Safari 16.4+、Firefox 128+）を対象としています。一部のユーティリティは新しい機能を使用するため、古い環境にも対応する必要がある場合は、それらを避けてください。
• プリプロセッサ：同じパイプラインで Tailwind と Sass／Less／Stylus を併用しないでください。メインのスタイリングレイヤーとして Tailwind を使用します。

---

クイックリファレンス

タスク	操作
エントリーポイント	@import "tailwindcss"; を含む CSS ファイルを1つ用意
Next.js	postcss.config.mjs に @tailwindcss/postcss を指定。Tailwind 設定ファイルは不要
Vite	@tailwindcss/vite の tailwindcss()
テーマ	CSS のみで @theme { ... } を指定
ベーススタイル	@layer base { ... }
コンポーネント	@layer components { ... }
カスタムユーティリティ	@utility name { ... }
カスタムバリアント	@custom-variant name (selector);

---

よくある間違い

• 属性の誤り：React／Next では className、Qwik／Vue では class を使用します。
• インポートの不足：@import "tailwindcss" を含むファイルは、アプリによって読み込まれるファイルである必要があります（例：ルートレイアウト）。
• 設定ファイル：tailwind.config.js、tailwind.config.ts、またはその他の tailwind.config.* を作成したり、作成を提案したりしないでください。JS 設定で content: []、theme: {}、プラグインを提案しないでください。Tailwind v4 で使用するのは CSS（@import "tailwindcss" と @theme）および Vite／PostCSS プラグインのみです。

---

追加リソース

• reference.md — テーマのオプション、公式ドキュメントへのリンク、デフォルトテーマの概要。
• 公式：Tailwind CSS v4 Docs — インストール、テーマ、カスタムスタイルの追加、互換性。