Tailwind CSS v4の新機能と使い方完全ガイド

Tailwind css v4 がついにベータ版としてリリースされました。今回のメジャーアップデートでは、パフォーマンスの大幅な改善と開発体験の向上が図られています。

主な変更点

1. CSS-firstアプローチ

v4 では、設定ファイル（tailwind.config.js）から css ファイルでの設定に移行します。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
      }
    }
  }
}

/* app.css */
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
      }
    }
  }
}

/* app.css */
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
}

2. パフォーマンスの大幅改善

• 3倍高速なビルド: Rust で書き直されたコンパイラにより、ビルド速度が劇的に向上
• より小さなバンドルサイズ: 未使用の css をより効率的に削除
• インクリメンタルビルド: 変更部分のみを再コンパイル

3. 新しいテーマシステム

Css 変数を使用した、より柔軟なテーマシステムが導入されました。

@theme {
  /* カラーパレット */
  --color-primary: #3b82f6;
  --color-primary-dark: #2563eb;
  
  /* スペーシング */
  --spacing-unit: 0.25rem;
  
  /* フォント */
  --font-sans: 'Inter', system-ui, sans-serif;
}

実践的な使用例

カスタムコンポーネントの作成

@layer components {
  .btn-primary {
    @apply bg-primary text-white px-4 py-2 rounded-lg;
    @apply hover:bg-primary-dark transition-colors;
  }
  
  .card {
    @apply bg-white rounded-xl shadow-lg p-6;
    @apply dark:bg-gray-800 dark:shadow-xl;
  }
}

レスポンシブでダークモード対応のカード

<div class="@container">
  <article class="bg-white rounded-xl shadow-lg overflow-hidden @lg:flex">
    <img 
      src="/api/placeholder/400/300" 
      alt="記事のサムネイル" 
      class="w-full @lg:w-1/3 object-cover"
    />
    <div class="p-6 @lg:p-8 @lg:flex-1">
      <h2 class="text-2xl font-bold mb-2 gradient-text">
        記事のタイトル
      </h2>
      <p class="text-gray-600 mb-4">
        記事の概要テキストがここに入ります。
      </p>
      <button class="btn-primary hover:bg-primary-dark transition-colors">
        続きを読む
      </button>
    </div>
  </article>
</div>

アニメーション付きのボタン

@keyframes pulse-subtle {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.btn-animated {
  @apply bg-gradient-to-r from-primary to-secondary text-white px-6 py-3 rounded-lg;
  animation: pulse-subtle 2s infinite;
}

移行時の注意点

1. 設定ファイルの変更

従来の tailwind.config.js から、css 内での設定に移行する必要があります。

2. プラグインの互換性

v3 のプラグインは、v4 では動作しない可能性があります。プラグインの更新を確認してください。

3. アップグレードツールの活用

npx @tailwindcss/upgrade

このコマンドで依存関係の更新、設定ファイルの css への移行、テンプレートファイルの変更処理を自動で行えます。

3. ビルドツールの更新

Vite、PostCSS、または Tailwind CLI の最新バージョンを使用することを推奨します。

パフォーマンスの最適化

1. 未使用のCSSの削除

v4 では、より効率的な未使用 css 削除が実装されています：

/* 自動的に未使用のスタイルは含まれない */
@import "tailwindcss" layer(utilities);

2. JITモードがデフォルト

Just-In-Time コンパイルがデフォルトで有効になり、必要なスタイルのみが生成されます。

3. 動的な値の使用

従来は h-[60px] のように角括弧が必要でしたが、v4 では h-15（15rem を自動計算）のような指定が可能になりました。

まとめ

Tailwind css v4 は、パフォーマンスと開発体験の両面で大幅な改善をもたらしています。CSS-first のアプローチにより、より直感的で保守しやすいコードを書けるようになりました。

新しいプロジェクトでは積極的に v4 を採用し、既存プロジェクトでも段階的な移行を検討することをお勧めします。モダンな web 開発のニーズに応える、次世代の css フレームワークとして、Tailwind css v4 は開発者にとって強力なツールとなるでしょう。