Tailwind CSS v4への移行ガイドと新機能の使い方

/* globals.css - Tailwind CSS v4の基本設定 */

/* v3の書き方（古い） */
/* @tailwind base;
@tailwind components;
@tailwind utilities; */

/* v4の書き方（新しい） */
@import "tailwindcss";

/* テーマのカスタマイズ */
@theme {
  /* カラーパレット */
  --color-primary: oklch(0.6 0.2 250);
  --color-primary-foreground: oklch(0.98 0 0);
  --color-secondary: oklch(0.5 0.15 300);

  /* フォントファミリー */
  --font-sans: 'Inter', 'Noto Sans JP', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* スペーシング（デフォルトを拡張） */
  --spacing-18: 4.5rem;
  --spacing-22: 5.5rem;

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

/* カスタムキーフレーム */
@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* カスタムバリアント */
@custom-variant dark (&:where(.dark, .dark *));
@custom-variant hocus (&:hover, &:focus);

/* プラグインの追加 */
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

/* @themeで定義した値はCSSカスタムプロパティとして公開される */

@theme {
  --color-brand: #3B82F6;
  --color-brand-dark: #1D4ED8;
  --radius-button: 0.5rem;
}

/* 生成されるCSS（Tailwindが自動生成） */
/* :root {
  --color-brand: #3B82F6;
  --color-brand-dark: #1D4ED8;
  --radius-button: 0.5rem;
} */

/* @themeの値をユーティリティとして使用 */
/* <button class="bg-brand text-white rounded-button"> */

/* JavaScriptからCSSカスタムプロパティにアクセス */
/* const brand = getComputedStyle(document.documentElement)
     .getPropertyValue('--color-brand').trim() */

/* 既存のCSS変数をTailwindで使用 */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
}

/* shadcn/uiとの互換性（HSL値をTailwindで利用） */
@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
}

/* コンポーネントでの使用 */
/* <div class="bg-background text-foreground"> */

/* Next.jsプロジェクトでのvite/tailwind設定 */
/* postcss.config.ts は不要になる場合がある */
/* vite.config.ts */
/* import tailwindcss from '@tailwindcss/vite'
export default {
  plugins: [tailwindcss()],
} */

/* v3の設定（移行前） */
/* tailwind.config.js */
/* module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          100: '#dbeafe',
          500: '#3b82f6',
          900: '#1e3a8a',
        },
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
      borderRadius: {
        '4xl': '2rem',
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
  ],
} */

/* v4の設定（移行後） */
/* globals.css */
@import "tailwindcss";

@theme {
  /* カラー */
  --color-brand-50: #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-500: #3b82f6;
  --color-brand-900: #1e3a8a;

  /* フォント */
  --font-sans: 'Inter', sans-serif;

  /* ボーダーラジウス */
  --radius-4xl: 2rem;
}

/* プラグイン */
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

/* v4で変更されたクラス名 */
/* shadow-sm → shadow-xs */
/* text-opacity-* → text-*//{opacity} */
/* bg-opacity-* → bg-*//{opacity} */
/* transform → 不要（デフォルトで有効） */
/* overflow-ellipsis → text-ellipsis */

/* v4の新しいユーティリティクラスの使用例 */

/* text-wrap: balance - 見出しのジャグを防ぐ */
/* <h1 class="text-balance">長い見出しテキストを均等に折り返す</h1> */

/* field-sizing-content - テキストエリアの自動サイズ調整 */
/* <textarea class="field-sizing-content resize-none" /> */

/* @starting-style - 要素が表示される時のアニメーション */
/* dialog[open] {
     @apply opacity-100 translate-y-0;
     @starting-style {
       @apply opacity-0 -translate-y-4;
     }
   } */

/* not-*バリアント */
/* <li class="not-last:mb-4">リストアイテム（最後以外にマージン）</li> */

/* in-*バリアント: 親の状態に基づくスタイル */
/* <div class="group">
     <span class="in-[.group:hover]:text-blue-500">
       親ホバー時に色変更
     </span>
   </div> */

/* size-*ユーティリティ（width + heightを同時に設定） */
/* <div class="size-12">  ← w-12 h-12 と同じ */
/* <div class="size-full"> ← w-full h-full と同じ */

/* starting:バリアント（dialog等のエントリアニメーション） */
/* <dialog class="
     opacity-100 translate-y-0 transition-all
     starting:opacity-0 starting:-translate-y-4
   "> */

/* エラー1: tailwind.config.jsが無視される */
/* 解決: globals.cssに設定を移行する */

/* エラー2: カスタムカラーがユーティリティとして使えない */
/* 原因: @themeの書き方が間違っている */

/* ❌ 間違い */
/* @theme { colors: { brand: '#3B82F6' } } */

/* ✅ 正しい */
@theme {
  --color-brand: #3B82F6;
}

/* エラー3: @apply内でカスタムカラーが使えない */
/* 解決: @layerを適切に使用する */
@layer utilities {
  .btn-primary {
    @apply bg-brand text-white px-4 py-2 rounded;
  }
}

/* エラー4: プラグインが認識されない */
/* ❌ v3の書き方 */
/* plugins: [require('@tailwindcss/typography')] */

/* ✅ v4の書き方（globals.css内） */
@plugin "@tailwindcss/typography";

/* エラー5: content配列が不要になった */
/* v4ではcontent設定なしで自動検知される */
/* 特定ファイルのみを対象にしたい場合は: */
@source "../node_modules/your-lib/src";

/* エラー6: arbitrary valuesの構文変更 */
/* v3: bg-[#3B82F6] */
/* v4: bg-[#3B82F6] （変更なし）*/
/* ただし、CSSカスタムプロパティの参照方法が変わる */
/* v3: bg-[color:var(--brand)] */
/* v4: bg-(--brand) または bg-[var(--brand)] */