ドキュメントブログショーケースプラス

Tailwind CSS v3.2: ダイナミックブレークポイント、マルチ構成、そしてコンテナクエリ、なんてことだ！

Adam Wathan
Tailwind CSS v3.2

Tailwind CSS v3.2 がリリースされました。ダイナミックブレークポイント、単一プロジェクト内での複数設定ファイル、ネストされたグループ、パラメータ化されたバリアント、コンテナクエリなど、実に大規模な量の新機能が含まれています。

すべての詳細な修正と改善については、いつものようにリリースノートを確認してください。ここではハイライトをご紹介します。

npm から最新バージョンの tailwindcss をインストールして、プロジェクトをアップグレードしてください。

npm install -D tailwindcss@latest

または、ブラウザ上で即座にすべてを試すことができる Tailwind Play で新機能を試してみてください。

@config を使用した単一プロジェクト内での複数設定ファイル

CSS ファイル内で使用して、そのファイルに使用する Tailwind CSS 設定を指定できる新しい @config ディレクティブを追加しました。

@config "./tailwind.admin.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;

これにより、単一のプロジェクト内で、個別の Tailwind 設定を持つ複数のスタイルシートを簡単に構築できます。たとえば、サイトの顧客向け部分用の設定ファイルと、管理/バックエンドエリア用の別の設定ファイルを用意できます。

技術的には、webpack の魔法を十分に駆使すれば、これまでも可能でしたが、新しい @config ディレクティブにより、ビルドツール構成をあまり制御できないプロジェクトであっても、誰でも非常に簡単かつアクセスしやすくなりました。

supports-* によるブラウザサポートベースのスタイリング

supports-[...] バリアントを使用すると、ユーザーのブラウザで特定の機能がサポートされているかどうかに基づいて条件付きでスタイルを設定できるようになりました。これは、内部的に @supports ルール を生成します。

<div class="flex supports-[display:grid]:grid ...">
  <!-- ... -->
</div>

supports-[...] バリアントは、プロパティ/値のペアや、and や or を使用した式など、@supports (...) で使用するものを角括弧で囲んで受け取ります。

プロパティ自体がサポートされているかどうかだけを確認する必要がある場合は、プロパティ名を指定するだけで、Tailwind が残りの部分を自動的に補完します。

<div class="bg-black/75 supports-[backdrop-filter]:bg-black/25 supports-[backdrop-filter]:backdrop-blur ...">
  <!-- ... -->
</div>

ARIA 属性バリアント

ARIA 属性 に基づいて条件付きでスタイルを設定できるようになりました。新しい aria-* バリアントを使用します。

たとえば、aria-checked 状態が true かどうかに基づいて、要素の背景色を更新できます。

<span class="bg-gray-600 aria-checked:bg-blue-600" aria-checked="true" role="checkbox">
  <!-- ... -->
</span>

デフォルトでは、最も一般的なブール値 ARIA 属性のモディファイアが含まれています。

モディファイアCSS
aria-checked&[aria-checked="true"]
aria-disabled&[aria-disabled="true"]
aria-expanded&[aria-expanded="true"]
aria-hidden&[aria-hidden="true"]
aria-pressed&[aria-pressed="true"]
aria-readonly&[aria-readonly="true"]
aria-required&[aria-required="true"]
aria-selected&[aria-selected="true"]

tailwind.config.js ファイルの theme.aria または theme.extend.aria を編集することで、使用可能な aria-* モディファイアをカスタマイズできます。

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      aria: {
        asc: 'sort="ascending"',
        desc: 'sort="descending"',
      },
    },
  },
};

テーマに含めるのが適切でない一時的な aria モディファイアを使用する必要がある場合や、特定の値を取るより複雑な ARIA 属性の場合は、角括弧を使用して、任意の値をその場で生成します。

請求書番号顧客金額
#100Pendant Publishing$2,000.00
#101Kruger Industrial Smoothing$545.00
#102J. Peterman$10,000.25
<table>
  <thead>
    <tr>
      <th
        aria-sort="ascending"
        class="aria-[sort=ascending]:bg-[url('/img/down-arrow.svg')] aria-[sort=descending]:bg-[url('/img/up-arrow.svg')]"
      >
        Invoice #
      </th>
      <!-- ... -->
    </tr>
  </thead>
  <!-- ... -->
</table>

ARIA 状態モディファイアは、group-aria-* および peer-aria-* モディファイアを使用して、親要素と兄弟要素もターゲットにできます。

<table>
  <thead>
    <tr>
      <th aria-sort="ascending" class="group">
        Invoice #
        <svg
          class="group-aria-[sort=ascending]:rotate-0 group-aria-[sort=descending]:rotate-180"
        >
          <!-- ... -->
        </svg>
      </th>
      <!-- ... -->
    </tr>
  </thead>
  <!-- ... -->
</table>

データ属性バリアント

データ属性 に基づいて条件付きでスタイルを設定できるようになりました。新しい data-* バリアントを使用します。

定義上、標準の data-* 属性はないため、デフォルトでは任意の値のみをサポートしています。たとえば、

<!-- Will apply -->
<div data-size="large" class="data-[size=large]:p-8">
  <!-- ... -->
</div>
<!-- Will not apply -->
<div data-size="medium" class="data-[size=large]:p-8">
  <!-- ... -->
</div>
<!-- Generated CSS -->
<style>
  .data-\[size\=large\]\:p-8[data-size="large"] {
    padding: 2rem;
  }
</style>

プロジェクトで使用している一般的なデータ属性セレクターのショートカットを、tailwind.config.js ファイルの theme セクションの data キーの下に構成できます。

// tailwind.config.js
module.exports = {
  theme: {
    data: {
      checked: 'ui~="checked"',
    },
  },
  // ...
};
<div data-ui="checked active" class="data-checked:underline">
  <!-- ... -->
</div>

これらのバリアントは、フレームワーク内の他の多くのバリアントと同様に、group-* および peer-* バリアントとしても機能します。

<div data-size="large" class="group">
  <div class="group-data-[size=large]:p-8">
    <!-- Will apply `p-8` -->
  </div>
</div>
<div data-size="medium" class="group">
  <div class="group-data-[size=large]:p-8">
    <!-- Will not apply `p-8` -->
  </div>
</div>

最大幅とダイナミックブレークポイント

構成されたブレークポイントに基づいて最大幅メディアクエリを適用できる新しい max-* バリアントを追加しました。

<div class="max-lg:p-8">
  <!-- Will apply `p-8` until the `lg` breakpoint kicks in -->
</div>

一般的なルールとして、個人的には引き続き最小幅ブレークポイントを使用することをお勧めしますが、この機能は、異なるブレークポイントでスタイルを取り消す必要がないという、1 つの有用なワークフロー上のメリットを解放します。

たとえば、この機能がないと、多くの場合、次のようなことを行うことになります。

<div class="md:sr-only xl:not-sr-only">
  <!-- ... -->
</div>

この機能を使用すると、元の宣言に max-* バリアントを重ねることで、そのスタイルを取り消すことを回避できます。

<div class="md:max-xl:sr-only">
  <!-- ... -->
</div>

これに加えて、任意の値のサポートと、任意のの値のみを受け入れる新しい min-* バリアントを追加しました。これにより、次のようなことができます。

<div class="min-[712px]:max-[877px]:right-16 ...">
  <!-- ... -->
</div>

これらの機能は、プロジェクトがシンプルな screens 構成を使用している場合にのみ利用可能になることに注意してください。

これらの機能は、最終的な CSS でこれらのメディアクエリが、ブラウザで期待どおりの動作をするようにソートされるようにする必要があるため、見た目よりもはるかに複雑です。そのため、今のところ、screens 構成がデフォルト構成のような文字列値を持つ単純なオブジェクトである場合にのみ機能します。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px",
    },
  },
};

すでに max-width ブレークポイントが定義されている複雑な構成や、範囲ベースのメディアクエリ、または文字列以外の何かがある場合、これらの機能は利用できません。将来的には解決できるかもしれませんが、CSS の順序をどのようにすべきかについて、まだ答えのない多くの疑問が生じます。

したがって、今のところ（そしておそらく永遠に）、これらの機能を使用したい場合は、screens 構成をシンプルにする必要があります。これらの機能が複雑な screens 構成を不要にすることを願っています。

動的な group-* および peer-* バリアント

独自のセレクターを角括弧で囲んで「グループ化」または「ピア化」することで、カスタム group-* および peer-* バリアントをその場で作成できるようになりました。

<div class="group is-published">
  <div class="group-[.is-published]:block hidden">Published</div>
</div>

より詳細な制御を行うには、& 文字を使用して、渡しているセレクターに対して .group または .peer が最終的なセレクターのどこに配置されるかをマークできます。

<div>
  <input type="text" class="peer" />
  <div class="peer-[:nth-of-type(3)_&]:block hidden">
    <!-- ... -->
  </div>
</div>

真面目な話、これらの機能は一生のうちに 3 回くらいしか使わないでしょうが、それでもかなりクールです。これをビルディングブロックとして使用して、サードパーティプラグインによって登録されたバリアントで group と peer がより自動的に動作するようにできることを願っています。

matchVariant を使用した動的バリアント

これらの新機能の多くで、この新しい variant-[...] 構文に気付いたかもしれません。これはすべて、新しい matchVariant プラグイン API によって実現されており、これにより、私たちが「動的バリアント」と呼んでいるものを作成できます。

data-placement 属性を使用してツールチップの現在位置を通知する架空のツールチップライブラリ用の placement-* バリアントを作成する例を次に示します。

let plugin = require("tailwindcss/plugin");
module.exports = {
  // ...
  plugins: [
    plugin(function ({ matchVariant }) {
      matchVariant(
        "placement",
        (value) => {
          return `&[data-placement=${value}]`;
        },
        {
          values: {
            t: "top",
            r: "right",
            b: "bottom",
            l: "left",
          },
        },
      );
    }),
  ],
};

上記のバリアントは、placement-t や placement-b のようなバリアントを提供しますが、角括弧内の任意の値をサポートするため、この架空のツールチップライブラリに、組み込みの値を作成する必要がないと感じた他の潜在的な値がある場合でも、次のようなことができます。

<div class="placement-[top-start]:mb-2 ...">
  <!-- ... -->
</div>

この API を使用してカスタムバリアントを定義する場合、CSS が生成される順序をある程度制御して、各クラスが同じバリアントから派生した他の値に対して適切な優先順位を持つようにすることが重要になることがよくあります。これをサポートするために、バリアントを定義するときに提供できる sort 関数があります。

matchVariant("min", (value) => `@media (min-width: ${value})`, {
  sort(a, z) {
    return parseInt(a) - parseInt(z);
  },
});

バリアントモディファイアを使用したネストされた group および複数の peer サポート

複数の group チャンクが互いにネストされている場合、Tailwind にはそれらを区別する実際的な方法がないため、問題が発生する可能性があります。

これを解決するために、バリアントモディファイアのサポートを追加しています。これは、バリアントの最後に追加できる新しい動的チャンク（オプションの不透明度モディファイア構文に触発されたもの）で、各グループ/ピアに独自の識別子を与えるために使用できます。

どのように見えるかは次のとおりです。

<div class="group/sidebar ...">
  <!-- ... -->
  <div class="group/navitem ...">
    <a href="#" class="opacity-50 group-hover/navitem:bg-black/75 group-hover/sidebar:opacity-75">
      <!-- ... -->
    </a>
  </div>
  <!-- ... -->
</div>

これにより、各グループにそのコンテキストで意味のある明確な名前をその場で付けることができ、Tailwind はそれを機能させるために必要な CSS を生成します。

私は、これに対するソリューションを提供できることに本当に興奮しています。なぜなら、これは私が数年間解決策を見つけようとしてきたことであり、これが本当に私が望む力と柔軟性を提供できると感じられる最初のものだからです。

コンテナクエリ

ほとんど信じられませんが、コンテナクエリ がついに現実のものとなり、ブラウザのサポートはこれらを本番環境で使用できるようになるまで危険なほど近づいています。実際、Electron アプリを構築している場合は、今日からこれらを使用できます。

本日、フレームワークにコンテナクエリのサポートを追加する新しいファーストパーティプラグインである @tailwindcss/container-queries をリリースします。通常のメディアクエリと区別するために、新しい @ 構文を使用します。

<div class="@container">
  <div class="block @lg:flex">
    <!-- ... -->
  </div>
</div>

デフォルトでは、デフォルトの max-width スケールに一致するコンテナサイズのセットが含まれています。

名前値
xs20rem
sm24rem
md28rem
lg32rem
xl36rem
2xl42rem
3xl48rem
4xl56rem
5xl64rem
6xl72rem
7xl80rem

tailwind.config.js ファイルの containers キーを使用して、使用可能な値を構成できます。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      containers: {
        "2xs": "16rem",
        // etc...
      },
    },
  },
};

@[...] 構文を使用した任意のの値のサポートも含まれています。

<div class="@container">
  <div class="block @[618px]:flex">
    <!-- ... -->
  </div>
</div>

...そして、group-* および peer-* バリアント用に現在出荷しているのと同じバリアントモディファイア構文を使用した名前付きコンテナ。

<div class="@container/main">
  <!-- ... -->
  <div>
    <div class="block @lg/main:flex">
      <!-- ... -->
    </div>
  </div>
</div>

現在、シンプルな min-width ベースのコンテナクエリから始めていますが、時間の経過とともに範囲を拡大する予定であり、API を本当にうまくまとめられたと感じたら、すべてをコアに取り込みます。

完全なドキュメントについては、GitHub のプラグイン on GitHub を確認してください。

というわけで、Tailwind CSS v3.2 のご紹介でした！ 大幅な改善ですが、マイナーバージョンチェンジに過ぎないため、破壊的な変更はなく、依存関係を更新するだけでプロジェクトを更新できるはずです。

npm install -D tailwindcss@latest

ええ、後ろの方で聞こえますよ、まだテキストシャドウはありませんね。でも、少なくとも HTML を離れることなく、チェックボックスの親がリストの 3 番目の子である場合に、チェックボックスの兄弟をスタイル設定できます。優先順位ですよ、皆さん。

最新情報を直接受信箱に届けます。
ニュースレターに登録してください。

Copyright © 2025 Tailwind Labs Inc.·商標ポリシー