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

Tailwind CSS v3.4：ダイナミックビューポートユニット、:has() サポート、バランスの取れた見出し、サブグリッドなど

Adam Wathan
Tailwind CSS v3.4

主要な新製品を構築することは、自分のツールにあったらいいなと思うすべての機能を見つけるようなものです。そこで私たちはそのインスピレーションを活かし、それを形にしました — Tailwind CSS v3.4です。

いつものように、機能改善は、長年不満に思っていたことから、聞いたこともないような、おそらく職場では使えないCSS機能のサポートまで多岐にわたります。

優れた機能はすべてリストにありますが、この投稿では十分にアピールできなかった詳細については、リリースノートをご確認ください。

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

npm install tailwindcss@latest

または、ブラウザで直接 Tailwind Play で新機能をすべて試してみてください。

ダイナミックビューポートユニット

vh ユニットがブラウザに追加されたとき、私たちは皆とても興奮しました — ついに、DOMの17層を通して height: 100% を設定することなく、フルハイトのアプリケーションレイアウトなどを構築する方法ができたのです！しかし、モバイルデバイスとその厄介な消えるメニューバーは、すべての楽しみを台無しにし、vh ユニットは、実現できたはずの素晴らしい未来を残酷に思い出させるものになってしまいました。

しかし、今、私たちは新しい未来を手に入れました — dvh、lvh、svh は、消えるブラウザクロームに対応するように設計されており、Tailwind CSS v3.4 はこれらをすぐにサポートしています。

ビューポートを上下にスクロールしてブラウザUIを非表示/表示にします

tailwindcss.com

h-dvh

<div class="h-dvh">
  <!-- ... -->
</div>

デフォルトで次の新しいクラスが追加されました

クラスCSS
h-svhheight: 100svh
h-lvhheight: 100lvh
h-dvhheight: 100dvh
min-h-svhmin-height: 100svh
min-h-lvhmin-height: 100lvh
min-h-dvhmin-height: 100dvh
max-h-svhmax-height: 100svh
max-h-lvhmax-height: 100lvh
max-h-dvhmax-height: 100dvh

他の値が必要な場合は、min-h-[75dvh] のように任意の値をいつでも使用できます。

ブラウザのサポートは、現在かなり優れています。Safari 14 をサポートする必要がない限り、すぐに使い始めることができます。

新しい :has() バリアント

:has() 擬似クラスは、flexbox以来、CSSに追加された最も強力なものです。初めて、要素をその子要素に基づいてスタイル設定できます。親要素だけでなく。後続の兄弟要素に基づいてスタイル設定することも可能です。

ラジオボタンがチェックされている場合、親要素に色付きのリングが表示される例を次に示します

支払い方法
<label class="has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-900 has-[:checked]:ring-indigo-500 ...">
  <svg fill="currentColor">
    <!-- ... -->
  </svg>
  Google Pay
  <input type="radio" class="accent-indigo-500 ..." />
</label>

ここ数ヶ月取り組んでいる新しいUIキットの開発中に、毎週 :has() の新しいユースケースを見つけているような気がします。そして、コード内の膨大な量のJavaScriptを置き換えることができました。

たとえば、テキスト入力はデザイン的に非常に複雑で、構築するには少しラッパー要素が必要です。:has() がなければ、入力の :disabled 状態などの状態に基づいてラッパーをスタイル設定する方法はありませんでしたが、今では可能です。

input.jsx
export function Input({ ... }) {
  return (
    <span className="has-[:disabled]:opacity-50 ...">
      <input ... />
    </span>
  )
}

これはかなり最先端の機能ですが、文字通り今日から、すべての主要なブラウザの最新バージョンでサポートされるようになりました。Firefoxユーザーが今日のアップデートをインストールするまで数週間待てば、大胆に使用できるようになるはずです。

* バリアントで子要素をスタイル設定

文字通り誰もがずっと望んでいた機能があります — ユーティリティクラスを使用して親要素から子要素をスタイル設定する方法です。

新しい * バリアントを追加しました。これは直接の子要素をターゲットにし、次のようなことができます。

カテゴリ

セールス
マーケティング
SEO
アナリティクス
デザイン
戦略
セキュリティ
成長
モバイル
UX/UI
<div>
  <h2>Categories:<h2>
  <ul class="*:rounded-full *:border *:border-sky-100 *:bg-sky-50 *:px-2 *:py-0.5 dark:text-sky-300 dark:*:border-sky-500/15 dark:*:bg-sky-500/10 ...">
    <li>Sales</li>
    <li>Marketing</li>
    <li>SEO</li>
    <!-- ... -->
  </ul>
</div>

一般的に、子要素を直接スタイル設定することをお勧めしますが、これらの要素を制御できない場合や、要素が使用されているコンテキストのために条件付きで調整する必要がある場合に役立ちます。

他のバリアントと組み合わせることもできます。たとえば、hover:*:underline は、子要素がホバーされたときに任意の子要素をスタイル設定します。

私たちが取り組んでいる新しいUIキットで、さまざまな子要素に条件付きでレイアウトスタイルを追加するために使用しているクールな方法を次に示します。

JSX
function Field({ children }) {
  return (
    <div className="data-[slot=description]:*:mt-4 ...">
      {children}
    </div>
  )
}
function Description({ children }) {
  return (
    <p data-slot="description" ...>{children}</p>
  )
}
function Example() {
  return (
    <Field>
      <Label>First name</Label>
      <Input />
      <Description>Please tell me you know your own name.</Description>
    </Field>
  )
}

そのクレイジーな data-[slot=description]:*:mt-4 クラスをご覧ください。最初にすべての直接の子要素（*: 部分）をターゲットにし、次に data-slot="description" 属性を持つアイテムのみに data-[slot=description] を使用してフィルタリングします。

これにより、完全に任意のバリアントに頼ることなく、特定の子要素のみを簡単にターゲットにできます。

誰もがこの機能を追加したことを後悔させるようなひどいことをするのを楽しみにしています。

新しい size-* ユーティリティ

アバターのサイズを設定する必要があるたびに h-5 w-5 と入力するのにうんざりしているでしょう。それはあなたも私も知っています。

Tailwind CSS v3.4 では、ついに幅と高さを同時に設定する新しい size-* ユーティリティを追加しました。

HTML
<div>
  <img class="h-10 w-10" ...>
  <img class="h-12 w-12" ...>
  <img class="h-14 w-14" ...>
  <img class="size-10" ...>
  <img class="size-12" ...>
  <img class="size-14" ...>
</div>

私たちはこれを永遠に追加したいと思っていましたが、正確な名前で常に悩んでいました — size-* は w-* や h-* に比べてタイプ数が多く、s-* は非常に謎めいているように感じました。

しかし、数週間使用した後、名前が長くても、個別の幅と高さのユーティリティよりもはるかに優れていると断言できます。特にバリアントと組み合わせたり、複雑な任意の値を使用したりする場合は非常に便利です。

text-wrap ユーティリティによるバランスの取れた見出し

ランディングページの小さなセクション見出しをきれいに折り返すために、max-width をいじったり、レスポンシブな改行を挿入したりするのにどれだけの時間を費やしましたか？ブラウザが text-wrap: balance で代わりにやってくれるので、もう時間を費やす必要はありません。

愛されたマンハッタンスープスタンドが閉店

ニューヨーク市民は、街で最も尊敬されているスープスタンドが予期せず閉店し、コミュニティを困惑させた一連の出来事を受けて、今年の冬の寒さを以前より暖かく感じなくなっています。

<article>
  <h3 class="text-balance ...">Beloved Manhattan soup stand closes<h3>
  <p>New Yorkers are facing the winter chill...</p>
</article>

段落の末尾で孤立した単語を避けるために text-wrap: pretty を使用する text-pretty も追加しました。

愛されたマンハッタンスープスタンドが閉店

ニューヨーク市民は、街で最も尊敬されているスープスタンドが予期せず閉店し、コミュニティを困惑させた一連の出来事を受けて、今年の冬の寒さを以前より暖かく感じなくなっています。

<article class="text-pretty ...">
  <h3>Beloved Manhattan soup stand closes<h3>
  <p>New Yorkers are facing the winter chill...</p>
</article>

これらの機能の良い点は、古いブラウザでサイトにアクセスした場合でも、通常の折り返し動作にフォールバックするため、今日から使い始めても完全に安全であることです。

サブグリッドのサポート

サブグリッドは、比較的最近のCSS機能で、要素が親要素からグリッド列または行をある程度継承し、子要素を親グリッドに配置できるようにします。

HTML
<div class="grid grid-cols-4 gap-4">
  <!-- ... -->
  <div class="col-span-3 grid grid-cols-subgrid gap-4">
    <div class="col-start-2">06</div>
  </div>
  <!-- ... -->
</div>

たとえば、私たちが取り組んでいる新しいUIキットで、ドロップダウンメニューでサブグリッドを使用しています。これにより、アイコンを持つアイテムがある場合、他のすべてのアイテムがインデントされ、テキストが揃えられます。

HTML
<div role="menu" class="grid grid-cols-[auto_1fr]">
  <a href="#" class="col-span-2 grid-cols-subgrid">
    <svg class="mr-2">...</svg>
    <span class="col-start-2">Account</span>
  </a>
  <a href="#" class="col-span-2 grid-cols-subgrid">
    <svg class="mr-2">...</svg>
    <span class="col-start-2">Settings</span>
  </a>
  <a href="#" class="col-span-2 grid-cols-subgrid">
    <span class="col-start-2">Sign out</span>
  </a>
</div>

アイテムにアイコンがない場合、最初の列は0pxに縮小され、テキストは左端まで揃えられます。

詳細については、サブグリッドに関するMDNドキュメントをご覧ください — 最初は理解するのが少し難しい機能ですが、一度理解すれば、ゲームチェンジャーになります。

拡張された min-width、max-width、min-height スケール

min-width、max-width、min-height スケールを拡張して、完全なスペーシングスケールを含めるようにしました。これにより、min-w-12 のようなクラスが実際に存在するようになりました。

HTML
<div class="min-w-12">
  <!-- ... -->
</div>

v3.0 でこれを行うべきでしたが、なかなか手が回らなかったのです — 申し訳ありません、そしてようこそ。

拡張された opacity スケール

opacity スケールも拡張して、5刻みですべてのステップを含めるようにしました。

HTML
<div class="opacity-35">
  <!-- ... -->
</div>

これにより、マークアップ内の任意の値を少し減らすことができるはずです。次は2.5％を目指します。

拡張された grid-rows-* スケール

焼き付けられたグリッド行の数も6から12に増やしました。理由は特にありません。

HTML
<div class="grid grid-rows-9">
  <!-- ... -->
</div>

次のリリースでさらにクレイジーにして16に増やすかもしれません。

新しい forced-colors バリアント

強制カラーモードをご存知ですか？あなたのサイトは、おそらくそれでかなりひどく見えるでしょう。

しかし、少なくとも今では私たちのせいにすることはできません。Tailwind CSS v3.4 には、強制カラーモードのスタイルを調整するための forced-colors バリアントが含まれているからです。

HTML
<form>
  <input type="checkbox" class="appearance-none forced-colors:appearance-auto ..." />
</form>

これは、完全にカスタムコントロールを微調整する場合、特に任意のバリアントと CSSシステムカラー の実用的な知識と組み合わせる場合に非常に役立ちます。

新しい forced-color-adjust ユーティリティ

また、強制カラーモードがデザインにどのように影響するかを制御するための新しい forced-color-adjust-auto および forces-color-adjust-none ユーティリティを追加しました。

HTML
<fieldset>
  <legend>Choose a color</legend>
  <div class="forced-color-adjust-none ...">
    <label>
      <input class="sr-only" type="radio" name="color-choice" value="white" />
      <span class="sr-only">White</span>
      <span class="size-6 rounded-full bg-white"></span>
    </label>
    <label>
      <input class="sr-only" type="radio" name="color-choice" value="gray" />
      <span class="sr-only">Gray</span>
      <span class="size-6 rounded-full bg-gray-300"></span>
    </label>
    <!-- ... -->
  </div>
</fieldset>

これらは非常に控えめに使用する必要がありますが、オンラインストアで誰かが購入しているものの色を選択するなど、何かが特定の色でレンダリングされることが重要な場合に役立ちます。

この強制カラーに関するすべての詳細については、Polypaneブログの「強制カラーの説明：実践ガイド」を読むことをお勧めします — これまでに見つけたこのトピックに関する最も役立つ投稿です。

注意深く見てきた方は、Oxide、今年の夏に Tailwind Connect でプレビューしたエンジン改善について疑問に思っているかもしれません。

当初、これらの改善は v3.4 用に予定していましたが、まだいくつか修正する必要がある点があり、他の改善点が非常に多く積み重なっていたため、それらをすべてまとめてリリースするのが理にかなっていると考えました。Oxide の件はまだ進行中で、新年に行われる次回の Tailwind CSS リリースの目玉となる改善となる予定です。

それまでの間、npmで最新バージョンにアップデートして、Tailwind CSS v3.4 を掘り下げてみてください。

$ npm install tailwindcss@latest

:has() と新しい * バリアントにより、HTMLはこれまで以上に制御不能になるでしょう。

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

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