メインコンテンツまでスキップ

カスタマイズ

この章では、Tailwind CSS v4 の CSS-First な設定方法を学びます。

v4 の CSS-First Configuration​

v4 では設定を CSS ファイル内で直接行います。tailwind.config.js は不要です。

@import "tailwindcss";

@theme {
  /* ここでテーマをカスタマイズ */
}

テーマのカスタマイズ​

カラーの追加​

@import "tailwindcss";

@theme {
  /* ブランドカラー */
  --color-brand-50: #f0f9ff;
  --color-brand-100: #e0f2fe;
  --color-brand-200: #bae6fd;
  --color-brand-300: #7dd3fc;
  --color-brand-400: #38bdf8;
  --color-brand-500: #0ea5e9;
  --color-brand-600: #0284c7;
  --color-brand-700: #0369a1;
  --color-brand-800: #075985;
  --color-brand-900: #0c4a6e;
  --color-brand-950: #082f49;
}
<div class="bg-brand-500 text-brand-50">ブランドカラー</div>

既存の色を上書き​

@theme {
  --color-blue-500: #3b82f6;  /* デフォルト値を変更 */
}

フォントの追加​

@theme {
  --font-display: "Montserrat", sans-serif;
  --font-body: "Noto Sans JP", sans-serif;
}
<h1 class="font-display">見出しフォント</h1>
<p class="font-body">本文フォント</p>

スペーシングのカスタマイズ​

v4 の数値スペーシング (p-18 / w-128 など) は --spacing (デフォルト 0.25rem) から動的に派生するため、@theme での追加定義は不要です。

<!-- 定義なしでそのまま使える (p-18 = 4.5rem, w-128 = 32rem) -->
<div class="p-18 w-128">動的スペーシング</div>

スケール全体を変えたい場合は --spacing 自体を上書きします。数値 × --spacing のスケールで表現できない名前付き値が必要な場合のみ、--spacing-* で追加します。

@theme {
  --spacing: 2px;  /* p-4 が 8px になる */
}

ブレークポイントの追加​

@theme {
  --breakpoint-xs: 480px;
  --breakpoint-3xl: 1920px;
}
<div class="xs:block 3xl:max-w-7xl">カスタムブレークポイント</div>

シャドウの追加​

@theme {
  --shadow-soft: 0 2px 15px -3px rgba(0, 0, 0, 0.07),
                 0 10px 20px -2px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.5);
}
<div class="shadow-soft">ソフトシャドウ</div>
<div class="shadow-glow">グロウシャドウ</div>

ボーダー半径の追加​

v4 の組み込みは rounded-4xl (2rem) までです。それより大きい値は --radius-* で追加します。

@theme {
  --radius-5xl: 2.5rem;
}
<div class="rounded-5xl">大きな角丸</div>

アニメーションの追加​

@theme {
  --animate-fade-in: fade-in 0.5s ease-out;
  --animate-slide-up: slide-up 0.3s ease-out;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
<div class="animate-fade-in">フェードイン</div>
<div class="animate-slide-up">スライドアップ</div>

カスタムユーティリティ​

@utility と @apply の違い

@utility は v4 で追加された新しいディレクティブで、@apply とは異なるアプローチです。@apply は既存のユーティリティクラスを CSS 内で再利用する仕組みですが、@utility は新しいユーティリティクラスそのものを定義します。hover: や md: などのバリアントとも自動的に組み合わせて使えるため、Tailwind の設計思想に沿った拡張方法です。

@utility ディレクティブ​

v4.1 から text-shadow-2xs〜text-shadow-lg は組み込みユーティリティになりました。カスタムユーティリティの名前は組み込みと衝突しないものを選びます。

@utility text-shadow-hard {
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);
}

@utility text-glow {
  text-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
}
<h1 class="text-shadow-hard">くっきりしたテキストシャドウ</h1>
<h1 class="text-glow">光るテキストシャドウ</h1>

ネスト (擬似要素) を含むユーティリティ​

@utility scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

カスタムバリアント​

@custom-variant ディレクティブ​

/* ホバーグループバリアント */
@custom-variant hocus (&:hover, &:focus);

/* テーマ属性バリアント */
@custom-variant theme-midnight (&:where([data-theme="midnight"] *));

/* ダークモードのカスタム実装 */
@custom-variant dark (&:where(.dark, .dark *));

print: のような組み込みバリアントは定義不要でそのまま使えます。

<button class="hocus:bg-blue-600">ホバーまたはフォーカス時</button>
<div class="print:hidden">印刷時は非表示</div>

プラグインの追加​

v4 でもプラグインを使用できます。まず npm でインストールします。

npm install -D @tailwindcss/typography @tailwindcss/forms
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

@tailwindcss/typography​

<article class="prose lg:prose-xl">
  <h1>見出し</h1>
  <p>本文テキスト...</p>
</article>

@tailwindcss/forms​

<input type="text" class="form-input rounded-lg" />
<select class="form-select rounded-lg">
  <option>オプション</option>
</select>

デフォルト値のリセット​

デフォルトのスタイルをリセットして独自の値のみを使用できます。

@theme {
  /* すべての色をリセット */
  --color-*: initial;

  /* 独自の色のみ定義 */
  --color-primary: #3b82f6;
  --color-secondary: #6b7280;
  --color-accent: #10b981;
}

プリセットの作成​

再利用可能なテーマを CSS ファイルとして作成できます。

preset-corporate.css
@theme {
  --color-primary-50: #eff6ff;
  --color-primary-500: #3b82f6;
  --color-primary-900: #1e3a8a;

  --font-sans: "Inter", system-ui, sans-serif;
  --font-heading: "Montserrat", sans-serif;

  --radius: 0.5rem;
}
main.css
@import "tailwindcss";
@import "./preset-corporate.css";

実践例: コーポレートテーマ​

@import "tailwindcss";

@theme {
  /* ブランドカラー */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-200: #bae6fd;
  --color-primary-300: #7dd3fc;
  --color-primary-400: #38bdf8;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  --color-primary-800: #075985;
  --color-primary-900: #0c4a6e;

  --color-accent-500: #10b981;
  --color-accent-600: #059669;

  /* フォント */
  --font-sans: "Noto Sans JP", "Inter", system-ui, sans-serif;
  --font-heading: "Montserrat", sans-serif;

  /* カスタムシャドウ */
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                 0 2px 4px -2px rgba(0, 0, 0, 0.1);

  /* カスタムアニメーション */
  --animate-fade-in: fade-in 0.3s ease-out;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* カスタムユーティリティ */
@utility card {
  background-color: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--spacing-6);
}

@utility btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-4);
  background-color: var(--color-primary-500);
  color: white;
  border-radius: var(--radius-lg);
  font-weight: 500;
  transition: background-color 0.2s;

  &:hover {
    background-color: var(--color-primary-600);
  }
}
<div class="card">
  <h2 class="font-heading text-xl font-bold">カードタイトル</h2>
  <p class="mt-2 text-gray-600">カードの内容...</p>
  <button class="btn-primary mt-4">アクション</button>
</div>

CSS レイヤー​

Tailwind v4 は CSS レイヤーを使用してスタイルを整理します。

@layer base {
  /* ベーススタイル */
  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: var(--font-sans);
  }
}

@layer components {
  /* コンポーネントスタイル */
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-colors;
  }
}
v4 では @layer utilities を使わない

v3 までの @layer utilities 内のカスタムクラスは、v4 ではユーティリティとして登録されず、hover: などのバリアントも使えません。カスタムユーティリティの正式な API は @utility です (本章前半の「カスタムユーティリティ」を参照)。

まとめ​

  • @theme でテーマを CSS 内でカスタマイズ
  • --color-* / --font-* 等でテーマ変数を定義
  • @utility でカスタムユーティリティを作成
  • @custom-variant でカスタムバリアントを作成
  • @plugin でプラグインを追加
  • @layer でスタイルを整理
  • v4 は CSS ネイティブなアプローチ

次に読む​