Tailwind CSS v4 の新機能と便利なTips

Tailwind CSS v4 の主な変更点

Tailwind CSS v4 は大きなアーキテクチャの変更が行われました。従来のJavaScript設定ファイルから、CSS-firstな設計に移行しています。

設定がCSSベースに

v3までは tailwind.config.js で設定を行っていましたが、v4ではCSSファイル内で直接設定します。

@import "tailwindcss";

@theme {
  --color-primary: oklch(0.55 0.2 260);
  --color-secondary: oklch(0.65 0.18 330);
  --font-sans: 'Noto Sans JP', sans-serif;
}

@theme ディレクティブ

@theme ディレクティブを使って、カスタムテーマトークンを定義します。これらは自動的にユーティリティクラスとして使えるようになります。

ダークモードの設定

v4ではカスタムバリアントを使ってダークモードを定義します。

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

これにより、dark:bg-gray-800 のようなクラスが .dark クラスベースで動作します。

Viteプラグインとして統合

v4ではViteプラグインとして直接統合できます。

import tailwindcss from '@tailwindcss/vite';

export default {
  vite: {
    plugins: [tailwindcss()],
  },
};

便利なTips

oklch カラーの活用

oklch色空間を使うと、より知覚的に均一な色を定義できます。明度・彩度・色相を直感的に調整可能です。

コンテナクエリ

v4ではコンテナクエリがネイティブサポートされています。レスポンシブデザインをより柔軟に実装できます。

まとめ

Tailwind CSS v4はCSS-firstな設計に移行し、より直感的な設定が可能になりました。新しいプロジェクトではぜひv4を試してみてください。