Tailwind CSS 4.0で導入されたコンテナクエリの使い方

こんにちは、森田です。
現在α版であるTailwind CSS 4.0でデフォルトで導入されるコンテナクエリ（@container）についてご紹介します。
この機能により、従来のメディアクエリに加えて、コンテナのサイズに基づいてスタイルを切り替えることがプラグインの追加などが無しで可能になりました。

コンテナクエリについては以前の記事をご確認ください。

Tailwind CSS コンテナクエリ（@container）の使い方

判定の基準となる要素（コンテナ）にクラス @container を指定し、スタイルを変更する要素にサイズ：スタイルを指定します。

<div class="@container w-[500px] h-[500px] bg-gray-300">
  <div class="w-[300px] h-[300px] bg-blue-300 @[400px]:bg-red-300 transition-all"></div>
</div>

サンプルコートでは 400px とサイズを指定していますが、 @md:bg-red-300 のような指定も可能です。

動作サンプル

400pxを基準に背景色が変わっているのがわかります。

Tailwind Playでも動作確認できます。
https://play.tailwindcss.com/0gSKePpFh4

Tailwind CSS 3.2以降で利用可能

Tailwind CSS 4.0では標準で使うことができますが、Tailwind CSS 3.2以降でも、追加のパッケージをインストールすることでこの機能を利用できます。

$ npm install @tailwindcss/container-queries

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/container-queries'),
    // ...
  ],
}

CSSの出力を確認

@container は container-type: inline-size; にCSSが出力されます。
@[400px]:bg-red-300 がどのようになるか確認してみましょう。

<div class="w-[300px] h-[300px] bg-blue-300 @[400px]:bg-red-300 transition-all"></div>

/* @[400px]:bg-red-300 */

@container (width >= 400px) {
  background-color: var(--color-red-300, #fca5a5);
}

コンテナが400px以上の場合にスタイルを適用するCSSが出力されています。

Tailwind CSS 4.0 から使える新しいバリアント @min- と @max-

Tailwind CSS 4.0 より使える新しいバリアント「@min-」と「@max-」が追加されています。

@min- バリアント

@max- バリアントはモバイルファーストの場合に使用します。
@のみの指定と同じ動きをします。

<div class="w-[300px] h-[300px] bg-blue-300 @min-[400px]:bg-red-300 transition-all"></div>

CSSを確認してみましょう。

/* @min-[400px]:bg-red-300 */

@container (width >= 400px) {
  background-color: var(--color-red-300, #fca5a5);
}

@min- バリアントを使うと コンテナが400px以上の場合に背景が赤になります。

@max- バリアント

@max- バリアントはデスクトップファーストの場合に使用します。

<div class="w-[300px] h-[300px] bg-blue-300 @max-[400px]:bg-red-300 transition-all"></div>

CSSを確認してみましょう。

/* @max-[400px]:bg-red-300 */

@container (width < 400px) {
  background-color: var(--color-red-300, #fca5a5);
}

@max- バリアントを使うと コンテナが400px未満の場合に背景が赤になります。

まとめ

Tailwind CSS 4.0の正式リリースが待ち遠しいですね。
最近は Tailwind CSS を導入してコンポーネント開発することがほとんどですので、積極的に採用していきたいです。