Tailwind CSS v4の新機能と移行のポイント

Tailwind CSS v4がリリースされ、多くの新機能と改善が加わりました。

主な新機能

1. @theme構文

v4では、tailwind.config.jsの代わりにCSSで直接テーマを定義できるようになりました：

@import 'tailwindcss';

@theme inline {
  --color-primary: oklch(0.4341 0.0392 41.9938);
  --color-secondary: oklch(0.92 0.0651 74.3695);
  --radius: 0.5rem;
}

2. CSS変数の自動生成

定義したテーマ変数が自動的にTailwindクラスとして利用可能に：

<div class="bg-primary text-primary-foreground">
  <!-- --color-primary と --color-primary-foreground を使用 -->
</div>

3. カスタムバリアント

より柔軟なバリアント定義が可能に：

@custom-variant dark (&:is(.dark *));

4. パフォーマンス向上

• ビルド時間の短縮
• CSSファイルサイズの削減
• 開発サーバーの高速化

v3からの移行

設定ファイルの変更

v3:

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

v4:

/* globals.css */
@theme inline {
  --color-primary: #3b82f6;
}

ダークモード

v3:

// tailwind.config.js
module.exports = {
  darkMode: 'class',
}

v4:

@custom-variant dark (&:is(.dark *));

実装例

このサイトでのTailwind v4の実装例：

@import 'tailwindcss';
@plugin "@tailwindcss/typography";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  /* ... */
}

:root {
  --background: oklch(0.9821 0 0);
  --foreground: oklch(0.2435 0 0);
  /* ... */
}

.dark {
  --background: oklch(0.1776 0 0);
  --foreground: oklch(0.9491 0 0);
  /* ... */
}

メリット

1. シンプルな設定: JavaScript設定ファイルが不要
2. CSS変数との統合: 既存のCSS変数を活用
3. パフォーマンス: より高速なビルド
4. 保守性: CSS内で完結する設定

まとめ

Tailwind CSS v4は、より直感的で強力な機能を提供しています。 特に@theme構文とCSS変数の統合は、開発体験を大きく向上させます。

ぜひ試してみてください！

参考リンク

• Tailwind CSS v4公式ドキュメント
• Tailwind CSS v4リリースノート