Tailwind CSS v3.2 で追加された機能まとめ

2022.12.22
ともよーん

さてさて、今回はv3.1に続きTailwindcss v3.2で追加された機能のまとめです。

こちらのオフィシャルの記事に沿って説明していきます。
Tailwind CSS v3.2: Dynamic breakpoints, multi-config, and container queries, oh my! – Tailwind CSS
https://tailwindcss.com/blog/tailwindcss-v3-2

さて、ひとつひとつ見ていきましょう！

Multiple config files in one project using @config

一つのプロジェクトに複数のconfigファイルが使えるようになりました。
例えば、一般ユーザー側と管理者側のUIのテーマカラーが違う時など、分けられると便利ですね。

/* 一般ユーザー側のCSS */
@config "./tailwind.user.config.js"
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 管理者側のCSS */
@config "./tailwind.admin.config.js"
@tailwind base;
@tailwind components;
@tailwind utilities;

Browser-support-based styling with supports-*

サポート状況判定のための専用バリアント「supports-*」ができました。以前だとバリアントの方の[]の中に任意値として書かなければいけませんでしたが、supports-*で書けるとシンプルになりましたね。
ここでは書いていないですが、実案件ではsupports-*の前にサポートされていない時のスタイルを書くと良いでしょう。

<!-- supports-*なし -->
<div class="[@supports(backdrop-filter:blur(0))]:backdrop-blur"></div>

<!-- supports-*あり -->
<div class="supports-[backdrop-filter]:backdrop-blur"></div>

ARIA attribute variants

「aria-*」バリアントでARIA属性の状態に基づいたスタイル指定できるようになりました。
aria-checkedやaria-disabledなど、よく使われるものはモディファイアが用意されています。

<p class="aria-checked:bg-blue-600" aria-checked="true">...</p>

もし用意されていないものを使う場合は、conigファイルでテーマ拡張することもできますし、aria-[…]の形で任意値として書くこともできます。

用意されているモディファイアや拡張方法など詳しくはこちらのTailwindcss公式サイトの情報をご参考ください。

Data attribute variants

data属性も「data-*」バリアントでスタイル指定できるようになりました。
ただしARIA属性と違ってdata属性はよく使われる規定値はないので、全てdata-[…]の形で任意値を設定するようになります。

<!-- 効く場合 -->
<div data-size="large" class="data-[size=large]:p-8">
  <!-- ... -->
</div>

<!-- 効かない場合 -->
<div data-size="medium" class="data-[size=large]:p-8">
  <!-- ... -->
</div>

Max-width and dynamic breakpoints

「max-*」バリアントでmax-widthメディアクエリーを適用させることができるようになりました。ハイフンに続けて、sm、mdやlgなどTailwindcssが用意している（カスタマイズもできる）ものを使えます。「min-」も追加されましたが、こちらはmin-[…]の形での任意値のみ利用できます。

<!-- ブラウザ幅1024pxまで効く -->
<div class="max-lg:p-8">...</div>

<!-- ブラウザ幅712pxから877pxまで効く -->
<div class="min-[712px]:max-[877px]:p-8">...</div>

Dynamic group-* and peer-* variants

groupとpeerも規定値だけでなく、group-[…]やpeer-[…]の形で任意値が設定できるようになりました。

<!-- 動的に付与されるクラス名に合わせてグループ化した子要素にスタイル指定 -->
<div class="group is-published">
  <div class="hidden group-[.is-published]:block">
    パブリッシュされたよ
  </div>
</div>

Dynamic variants with matchVariant

ここまでいくつか〇〇-*の形のバリアントが増えたとご紹介してきましたが、これは全てmatchVariantプラグインAPIによるものなのです！
こちらのTailwindcss公式サイトの情報ではツールチップの表示位置指定用のバリアントを追加しています。興味ある方はぜひチェックしてみてください。

Nested group and multiple peer support using variant modifiers

上でもgroupとpeer絡みの新機能をご紹介をしましたが、さらに入れ子で複数のgroupとpeerの指定ができるようになりました。
以下のようにスラッシュに続けてgroup名・peer名を指定します。

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

Container queries

メディアクエリを使うようになって久しいですが、コンテナクエリってご存知ですか？ブラウザ対応も着々と進んできています。
ブラウザの幅ではなく、コンテナとして指定した要素の幅の伸び縮みによってスタイル指定を変えられるというものです。
今回「@tailwindcss/container-queries」プラグインを入れると、コンテナを@containerクラスで指定できるようになりました。

この機能を利用するにはまずプラグインのインストールが必要です。
https://github.com/tailwindlabs/tailwindcss-container-queries

<!-- lgなどの規定値を使う -->
<div class="@container">
  <div class="block @lg:flex">
    ...
  </div>
</div>

<!-- 任意値を使う -->
<div class="@container">
  <div class="block @[618px]:flex">
    ...
  </div>
</div>

イメージが湧かないという方は、公式ではないですがこちらのYouTubeでの実演がわかりやすかったのでチェックしてみてください。
https://youtu.be/q5ZaauBpSlU

v3.2でも色々な機能が追加されましたね。私はコンテナクエリが一番気になります。
任意値が充実してきたので、configファイルでガチガチ管理する派とできるだけ任意値で頑張ってファイル間での依存性をできるだけ減らす派に分かれそうですね。

ではでは、今回はこの辺で！