TailwindcssがContainer Queriesを実装したので試してみた

はじめに

Tailwincss v3.2.0がリリースされ、いくつかの機能が新しく追加されたようです。その中でも気になったContainer Queriesを今回は試してみたいと思います。

Media Queriesとの違い

結論からいうと、Media Queriesはwindowのサイズを参照し、Container Queriesは指定した親要素のサイズを参照します。共通している点は、条件を満たした場合は指定したCSSを適用し、満たさない場合は適用させないという点です。

Conteiner Queriesを試してみる

インストール

では早速Tailwindcssをインストールしていきます。

npm install tailwindcss@3.2.0
npm install @tailwindcss/container-queries

configに追記

tailwind.config.jsのpluginsに下記を記述します。

tailwind.config.js

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

これで準備は出来ました。では実際にスタイルを実装して試していきたいと思います。

スタイルの実装

記述する方法は、基準としたい親要素に@containerを記述し、適用させたいユーティリティの先頭に@をつけます。

index.html

<div class="flex flex-col gap-4 p-4">
    <div class="@container w-[300px]">
        <div class="bg-green-300 @[300px]:bg-gray-300 p-8">
            Container Queries適用
        </div>
    </div>
    <div class="w-[300px]">
        <div class="bg-yellow-300 p-8">
            300pxの要素
        </div>
    </div>
</div>

@containerで基準とした親要素のサイズを変えてみます。

index.html

<div class="flex flex-col gap-4 p-4">
<!--200pxに変更-->
    <div class="@container w-[200px]">
        <div class="bg-green-300 @[300px]:bg-gray-300 p-8">
            Container Queries適用
        </div>
    </div>
    <div class="w-[300px]">
        <div class="bg-yellow-300 p-8">
            300pxの要素
        </div>
    </div>
</div>

無事動きました！指定した親要素の幅を変更することで適応するCSSを出し分けることができています。

まとめ

今回はTailwindcssに実装されたContainer Queriesを使ってみました。ReactやVueのようなコンポーネントライブラリではwindowのサイズより親要素のサイズを参照した方が都合がいい場合があるのではないかと思います。そんな時にContainer Queriesを用いて記述量を減らし、より快適に開発をしていきたいです。

最後に

GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。