https://tech.excite.co.jp/entry/2025/02/03/171322

こんにちは。エキサイトでデザイナーをしている齋藤です。

2025年1月23日にTailwind CSSのv4の安定版がリリースされました。新機能の一つにコンテナークエリーのサポートがあります。

今回はTailwind CSSでコンテナークエリを使用する方法をご紹介します。

コンテナークエリーとは？

コンテナークエリーとは、特定の親要素（コンテナー）のサイズに基づいたスタイリングを可能にする機能です。

メディアクエリーは画面サイズですが、コンテナークエリは特定の要素のサイズを基準とするため、より柔軟にレスポンシブ対応が可能です。

以下の記事で詳しく説明していますので、合わせてご覧ください。

tech.excite.co.jp

簡単におさらい

純粋なCSSでコンテナークエリーを使用する場合、実装のポイントは以下の通りです。

基準とする要素にcontainer-typeを付与する
@container(...)とメディアクエリーと同じような形式でスタイリングする
container-nameを使用すると基準とする要素の名前を明示できる

完成形は以下の通りです。

<div class="parent">
    <div class="child">...</div>
</div>

<style>
    .parent {
        container-type: inline-size;
        container-name: parent;
    }
    
    .child {
        background-color: black;

        @container parent (max-width: 512px) {
            /* .parentの横幅が512px以下のときに背景色が赤になる */
            background-color: red;
        }
    }
</style>

Tailwind CSSでスタイリングする

基準とする要素に`@container`を追加

基準とする要素に@containerを追加します。@containerにはcontainer-type: inline-size;が含まれます。

<div class="@container"></div>

@container/{name}の形式でcontainer-nameが使用できます。

<div class="@container/parent"></div>

`@{size}:*`の形式でスタイリング

基準を使用する要素では@{size}:*の形式でスタイリングします。

コンテナーサイズトークン一覧は以下で確認できます。

tailwindcss.com

例えば、「基準とする要素の横幅が512px以上の場合に背景色が赤になる」という条件の場合は以下のようになります。

<div class="@container">
    <div class="@lg:bg-red-500"></div>
</div>

max-widthを表現したい場合は@max-{size}:*の形式にします。「基準とする要素の横幅が512px以下の場合に背景色が赤になる」という条件の場合は以下のようになります。

<div class="@container">
    <div class="@max-lg:bg-red-500"></div>
</div>

container-nameを使用している場合は@{size}/{name}:*の形式を使用します。

<div class="@container/parent">
    <div class="@lg/parent:bg-red-500"></div>
</div>

完成形

純粋なCSSと比較した完成形です。

純粋なCSS

<div class="parent">
    <div class="child">...</div>
</div>

<style>
    .parent {
        container-type: inline-size;
        container-name: parent;
        ...
    }
    
    .child {
        ...
        @container parent (max-width: 512px) {
            background-color: var(--red-500);
        }
    }
</style>

Tailwind CSS

<div class="@container/parent">
    <div class="@lg/parent:bg-red-500">...</div>
</div>

さいごに

今回はTailwind CSSでコンテナークエリを使用する方法をご紹介しました。

v4のコンテナークエリーのサポートで、表現の幅がより広まったと思います。

Tailwind CSSはHTMLに対してスタイルを直書きするため、HTMLから離れずに追うことができ、コンテナークエリーなどの複雑なスタイリングの理解もしやすいのではないかと思います。

Tailwind CSSを使用される方の一助となれば幸いです。

ご精読ありがとうございました。

参考文献