TailWind CSS v4、実際に使ってみてよかった新機能

こんにちは、Gaji-Labo でフロントエンドをやっている中嶋です。

Gaji-Labo は Next.js や Remix(React Router) などのモダンなフロントエンドの技術を使い、スタートアップ支援を行っている会社です。

Tailwind CSS v4がリリースされ、パフォーマンスや開発体験が大きく進化しました。今回個人開発で Tailwind CSS v4 を使用してみたので新しく追加された機能や改善された点、アップデートの際に注意するべき点などをご紹介できたらと思います。

v4 の主要な新機能と改善点

1. テーマ変更

設定ファイル（ tailwind.config.js ）ではなく、CSSファイル内で @theme ディレクティブを使ってカスタマイズ可能になりました。また、設定ファイル（ tailwind.config.js ）も引き続きサポートされているので、その際は @config "YOUR_PATH/tailwind.config.js"; のような形で使用することができます。

@import "tailwindcss";
@config "YOUR_PATH/tailwind.config.js"; // tailwind.config を使う場合
@theme {
--font-display: "Satoshi", "sans-serif";
--color-primary: oklch(0.84 0.18 117.33);
}

2. インストール・セットアップの簡素化

依存パッケージが減り、@import "tailwindcss"; だけで利用開始することができるようになりました。Vite 用の公式プラグインも登場していて、Vite ユーザーは @tailwindcss/vite を使用することができます。

3. 自動コンテンツ検出

v3 で必須だった content 配列の設定が不要になり、プロジェクト内のテンプレートファイルを自動で検出できるようになりました。また、@source xxx と指定することにより個別のファイルで使用できるようにすることも可能です。

4. モダンCSS機能の積極採用

Cascade Layers, color-mix(), @property, 論理プロパティなど最新CSS仕様を積極的に活用することができるようになります。

実際に使ってみてよかった新機能の実践例

1. arbitrary values の簡素化

arbitrary values とは text-[11px] のように class に定義されていない CSS プロパティを使用できる機能のことです。全てのプロパティではないですが、簡素化されるようになったため、使用しやすくなったと感じました。

<div class="opacity-1"></div>

2. 3Dトランスフォーム・拡張グラデーション

rotate-x-* , scale-z-* , bg-conic-* , bg-radial-* など、従来はカスタム CSS が必要だった表現がユーティリティクラスで簡単になりました。

<div class="perspective-distant">
  <div class="rotate-x-30 scale-z-110 bg-conic-[in_hsl_longer_hue] from-red-600 to-blue-600 size-24 rounded-full"></div>
</div>

3. コンテナクエリのサポート

@container などのレスポンシブ設計や可読性向上に役立つ新 API が追加されました。そのため、@tailwindcss/container-queries などのプラグインを使用しなくて良くなります。

<div class="@container">
  <div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4"></div>
</div>

4. バリアント・ユーティリティの拡張

not-* , nth-* など状態やデバイスに応じた細やかな制御が可能になりました。

<div class="nth-3:underline">...</div>

5. Descendant バリアントの追加

子要素全てに対して CSS を付与することができる ** バリアントが追加されました。

<div class="**:px-4">
 <p>テキスト１</p>
 <p>テキスト２</p>
</div>

アップグレード時の注意点

1. 依存パッケージの変更

@tailwindcss/postcss や @tailwindcss/cli など、パッケージ構成が大きく変わっています。 postcss-import や autoprefixer は不要になる場合が多いですが、プロジェクトによっては一部依存が残ることもあるので、必ず確認してください。また Vite を使用する際は @tailwindcss/vite の使用が推奨されています。

2. Lint・Prettier等のツール対応（2025年5月時点）

Tailwind v4 の新構文を積極的に使う場合、Lint や Formatter の一部機能が正しく動作しない可能性があるため、アップグレード前に各ツールの対応状況を必ず確認してください。Lint ルールや CI/CD のビルド設定も、新しい構成に合わせて見直しが必要です。

ESLint

公式の eslint-plugin-tailwindcss は 新構文（ @theme 等 ）には現状未対応です。一部代替プラグイン（ eslint-plugin-readable-tailwind など）は利用可能です。

Biome

CSS の Lint/Format には対応していますが、Tailwind v4 の独自ディレクティブ（ @theme, @source等 ）は現状未対応です。

Prettier

prettier-plugin-tailwindcss は対応済みです。設定ファイルで tailwindStylesheet オプションを指定することで利用可能です。

3. 破壊的変更・非推奨ユーティリティの削除

v3 で非推奨だったユーティリティ（例：text-opacity-* など）は削除されています。また、一部ユーティリティのリネーム（ 例： shadow-sm → shadow-xs ）やデフォルト値の変更（ 例：ring の幅が 3px → 1px ）もあるため、既存コードの一括置換や動作確認を必ず行ってください。

4. ブラウザ対応

比較的新しいブラウザには対応していますが、一部古いブラウザの場合は対応していない可能性がありますので、必ず動作確認を行ってください。

大規模開発などで恩恵を強く感じられる

Tailwind CSS v4は、パフォーマンス・開発体験・表現力のすべてが大きく進化したメジャーアップデートだと感じました。特に大規模開発や最新 CSS を活用したい場面では、恩恵を強く感じられることが多くなるのではないかと私自身感じています。一方で、依存パッケージや Lint ツール、破壊的変更への対応など、アップグレード時の注意点も多いため、事前の検証と段階的な移行を進めていくことも大事かなと思います。もし、アップグレードの知見や人員が足りないときは、 Gaji-Labo にご相談ください。

Gaji-Labo Culture Deck