ホバー、フォーカス、その他の状態

Tailwindのすべてのユーティリティクラスは、ターゲットとする条件を記述するバリアントをクラス名の先頭に追加することで、条件付きで適用できます。

たとえば、ホバー時にbg-sky-700クラスを適用するには、hover:bg-sky-700クラスを使用します。

<button class="bg-sky-500 hover:bg-sky-700 ...">Save changes</button>

.btn-primary {
  background-color: #0ea5e9;
}
.btn-primary:hover {
  background-color: #0369a1;
}

.bg-sky-500 {
  background-color: #0ea5e9;
}
.hover\:bg-sky-700:hover {
  background-color: #0369a1;
}

Tailwindには、必要なほぼすべてのバリアントが含まれています。例：

• 疑似クラス（:hover、:focus、:first-child、:requiredなど）
• 疑似要素（::before、::after、::placeholder、::selectionなど）
• メディアおよび機能クエリ（レスポンシブブレークポイント、ダークモード、prefers-reduced-motionなど）
• 属性セレクター（[dir="rtl"]、[open]など）
• 子セレクター（& > *、& *など）

これらのバリアントは、ダークモード、ミディアムブレークポイント、ホバー時など、より具体的な状況をターゲットにするために、積み重ねることもできます。

<button class="dark:md:hover:bg-fuchsia-600 ...">Save changes</button>

このガイドでは、フレームワークで利用可能なすべてのバリアント、独自のカスタムクラスでの使用方法、さらには独自のバリアントの作成方法について学習します。

疑似クラス

:hover、:focus、および :active

hover、focus、およびactiveバリアントを使用して、ホバー、フォーカス、およびアクティブ時の要素をスタイルします。

<button class="bg-violet-500 hover:bg-violet-600 focus:outline-2 focus:outline-offset-2 focus:outline-violet-500 active:bg-violet-700 ...">
  Save changes
</button>

Tailwindには、:visited、:focus-within、:focus-visibleなど、その他のインタラクティブな状態のバリアントも含まれています。

利用可能な疑似クラスバリアントの完全なリストについては、疑似クラスリファレンスを参照してください。

:first、:last、:odd、および :even

要素がfirst-childまたはlast-childの場合に、firstおよびlastバリアントを使用してスタイルします。

<ul role="list">
  {#each people as person}
    <!-- Remove top/bottom padding when first/last child -->
    <li class="flex py-4 first:pt-0 last:pb-0">
      <img class="h-10 w-10 rounded-full" src={person.imageUrl} alt="" />
      <div class="ml-3 overflow-hidden">
        <p class="text-sm font-medium text-gray-900 dark:text-white">{person.name}</p>
        <p class="truncate text-sm text-gray-500 dark:text-gray-400">{person.email}</p>
      </div>
    </li>
  {/each}
</ul>

要素がoddまたはevenの子である場合に、oddおよびevenバリアントを使用してスタイルすることもできます。

<table>
  <!-- ... -->
  <tbody>
    {#each people as person}
      <!-- Use different background colors for odd and even rows -->
      <tr class="odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950">
        <td>{person.name}</td>
        <td>{person.title}</td>
        <td>{person.email}</td>
      </tr>
    {/each}
  </tbody>
</table>

リスト内の位置に基づいて子をスタイルするには、nth-*およびnth-last-*バリアントを使用します。

<div class="nth-3:underline">
  <!-- ... -->
</div>
<div class="nth-last-5:underline">
  <!-- ... -->
</div>
<div class="nth-of-type-4:underline">
  <!-- ... -->
</div>
<div class="nth-last-of-type-6:underline">
  <!-- ... -->
</div>

これらにはデフォルトで任意の数値を渡すことができ、nth-[2n+1_of_li]のようなより複雑な式には任意の値を使用できます。

Tailwindには、:only-child、:first-of-type、:emptyなど、その他の構造疑似クラスのバリアントも含まれています。

利用可能な疑似クラスバリアントの完全なリストについては、疑似クラスリファレンスを参照してください。

:required および :disabled

required、invalid、disabledなどのバリアントを使用して、さまざまな状態のフォーム要素をスタイルします。

<input
  type="text"
  value="tbone"
  disabled
  class="invalid:border-pink-500 invalid:text-pink-600 focus:border-sky-500 focus:outline focus:outline-sky-500 focus:invalid:border-pink-500 focus:invalid:outline-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20 ..."
/>

この種のことにバリアントを使用すると、テンプレート内の条件ロジックの量を減らすことができ、入力がどのような状態にあるかに関係なく同じクラスのセットを使用でき、ブラウザが必要なスタイルを適用できます。

Tailwindには、:read-only、:indeterminate、:checkedなど、その他のフォーム状態のバリアントも含まれています。

利用可能な疑似クラスバリアントの完全なリストについては、疑似クラスリファレンスを参照してください。

:has()

has-*バリアントを使用して、子孫の状態またはコンテンツに基づいて要素をスタイルします。

<label
  class="has-checked:bg-indigo-50 has-checked:text-indigo-900 has-checked:ring-indigo-200 dark:has-checked:bg-indigo-950 dark:has-checked:text-indigo-200 dark:has-checked:ring-indigo-900 ..."
>
  <svg fill="currentColor">
    <!-- ... -->
  </svg>
  Google Pay
  <input type="radio" class="checked:border-indigo-500 ..." />
</label>

has-[:focus]のような疑似クラスとともにhas-*を使用すると、子孫の状態に基づいて要素をスタイルできます。また、has-[img]やhas-[a]のような要素セレクターを使用して、子孫のコンテンツに基づいて要素をスタイルすることもできます。

グループの子孫に基づくスタイリング

親要素の子孫に基づいて要素をスタイルする必要がある場合は、親をgroupクラスでマークし、group-has-*バリアントを使用してターゲット要素をスタイルできます。

スペンサー・シャープ

プロダクトデザイナー（ planeteria.tech

ケーシー・ジョーダン

ここにいられて幸せです。

アレックス・リード

アートとテクノロジーの交差点で働く、学際的なデザイナー。

alex-reed.com

テイラー・ベイリー

ピクセルをプッシュしています。divを投げています。

<div class="group ...">
  <img src="..." />
  <h4>Spencer Sharp</h4>
  <svg class="hidden group-has-[a]:block ..."><!-- ... --></svg>
  <p>Product Designer at <a href="...">planeteria.tech</a></p>
</div>

ピアの子孫に基づくスタイリング

兄弟要素の子孫に基づいて要素をスタイルする必要がある場合は、兄弟をpeerクラスでマークし、peer-has-*バリアントを使用してターゲット要素をスタイルできます。

<div>
  <label class="peer ...">
    <input type="checkbox" name="todo[1]" checked />
    Create a to do list
  </label>
  <svg class="peer-has-checked:hidden ..."><!-- ... --></svg>
</div>

:not()

条件が真でない場合に要素をスタイルするには、not-バリアントを使用します。

これは、他の疑似クラスバリアントと組み合わせると特に強力です。たとえば、not-focus:とhover:を組み合わせると、要素がフォーカスされていない場合にのみホバースタイルが適用されます。

<button class="bg-indigo-600 hover:not-focus:bg-indigo-700">
  <!-- ... -->
</button>

また、not-バリアントをforced-colorsやsupportsのようなメディアクエリバリアントと組み合わせて、ユーザーの環境に関する何かが真でない場合にのみ要素をスタイルすることもできます。

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

親の状態に基づくスタイリング

親要素の状態に基づいて要素をスタイルする必要がある場合は、親をgroupクラスでマークし、group-hoverのようなgroup-*バリアントを使用してターゲット要素をスタイルします。

<a href="#" class="group ...">
  <div>
    <svg class="stroke-sky-500 group-hover:stroke-white ..." fill="none" viewBox="0 0 24 24">
      <!-- ... -->
    </svg>
    <h3 class="text-gray-900 group-hover:text-white ...">New project</h3>
  </div>
  <p class="text-gray-500 group-hover:text-white ...">Create a new project from a variety of starting templates.</p>
</a>

このパターンは、group-focus、group-active、またはgroup-oddなど、すべての疑似クラスバリアントで機能します。

ネストされたグループの区別

グループをネストする場合、group/{name}クラスを使用して親に一意のグループ名を付け、group-hover/{name}のようなクラスを使用してバリアントにその名前を含めることで、特定の親グループの状態に基づいて何かをスタイルできます。

<ul role="list">
  {#each people as person}
    <li class="group/item ...">
      <!-- ... -->
      <a class="group/edit invisible group-hover/item:visible ..." href="tel:{person.phone}">
        <span class="group-hover/edit:text-gray-700 ...">Call</span>
        <svg class="group-hover/edit:translate-x-0.5 group-hover/edit:text-gray-500 ..."><!-- ... --></svg>
      </a>
    </li>
  {/each}
</ul>

グループには好きなように名前を付けることができ、何も構成する必要はありません。マークアップで直接グループに名前を付けるだけで、Tailwindが必要なCSSを自動的に生成します。

任意のグループ

角括弧の間に任意の値として独自のセレクターを提供することで、その場限りのgroup-*バリアントを作成できます。

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

より詳細な制御を行うには、渡しているセレクターに対する最終的なセレクター内で.groupを配置する場所をマークするために、&文字を使用できます。

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

暗黙的なグループ

in-*バリアントは、親要素にgroupを追加する必要がないことを除いて、groupと同様に機能します。

<div tabindex="0" class="group">
  <div class="opacity-50 group-focus:opacity-100">
<div tabindex="0">
  <div class="opacity-50 in-focus:opacity-100">
    <!-- ... -->
  </div>
</div>

in-*バリアントは任意の親の状態変化に応答するため、よりきめ細かい制御が必要な場合は、代わりにgroupを使用する必要があります。

兄弟の状態に基づくスタイリング

兄弟要素の状態に基づいて要素をスタイルする必要がある場合は、兄弟をpeerクラスでマークし、peer-invalidのようなpeer-*バリアントを使用してターゲット要素をスタイルします。

<form>
  <label class="block">
    <span class="...">Email</span>
    <input type="email" class="peer ..." />
    <p class="invisible peer-invalid:visible ...">Please provide a valid email address.</p>
  </label>
</form>

これにより、JSなしでフローティングラベルのようなあらゆる種類の気の利いたトリックを実行できます。

このパターンは、peer-focus、peer-required、peer-disabledなど、すべての疑似クラスバリアントで機能します。

CSSの後続兄弟結合子の仕組みにより、peerマーカーは前の兄弟でのみ使用できることに注意してください。

<label>
  <span class="peer-invalid:text-red-500 ...">Email</span>
  <input type="email" class="peer ..." />
</label>

ピアの区別

複数のピアを使用する場合、peer/{name}クラスを使用してそのピアに一意の名前を付け、peer-checked/{name}のようなクラスを使用してバリアントにその名前を含めることで、特定のピアの状態に基づいて何かをスタイルできます。

<fieldset>
  <legend>Published status</legend>
  <input id="draft" class="peer/draft" type="radio" name="status" checked />
  <label for="draft" class="peer-checked/draft:text-sky-500">Draft</label>
  <input id="published" class="peer/published" type="radio" name="status" />
  <label for="published" class="peer-checked/published:text-sky-500">Published</label>
  <div class="hidden peer-checked/draft:block">Drafts are only visible to administrators.</div>
  <div class="hidden peer-checked/published:block">Your post will be publicly visible on your site.</div>
</fieldset>

ピアには好きなように名前を付けることができ、何も構成する必要はありません。マークアップで直接ピアに名前を付けるだけで、Tailwindが必要なCSSを自動的に生成します。

任意のピア

角括弧の間に任意の値として独自のセレクターを提供することで、その場限りのpeer-*バリアントを作成できます。

<form>
  <label for="email">Email:</label>
  <input id="email" name="email" type="email" class="is-dirty peer" required />
  <div class="peer-[.is-dirty]:peer-required:block hidden">This field is required.</div>
  <!-- ... -->
</form>

より詳細な制御を行うには、渡しているセレクターに対する最終的なセレクター内で.peerを配置する場所をマークするために、&文字を使用できます。

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

疑似要素

::before および ::after

beforeおよびafterバリアントを使用して、::beforeおよび::after疑似要素をスタイルします。

<label>
  <span class="text-gray-700 after:ml-0.5 after:text-red-500 after:content-['*'] ...">Email</span>
  <input type="email" name="email" class="..." placeholder="you@example.com" />
</label>

これらのバリアントを使用すると、Tailwindはデフォルトでcontent: ''を自動的に追加するため、別の値を指定する場合を除き、指定する必要はありません。

<blockquote class="text-center text-2xl font-semibold text-gray-900 italic dark:text-white">
  When you look
  <span class="relative inline-block before:absolute before:-inset-1 before:block before:-skew-y-3 before:bg-pink-500">
    <span class="relative text-white dark:text-gray-950">annoyed</span>
  </span>
  all the time, people think that you're busy.
</blockquote>

Tailwindプロジェクトのほとんどのことに対して、::beforeおよび::after疑似要素は実際には必要ないことに注意してください。通常、実際のHTML要素を使用する方が簡単です。

たとえば、上記の同じデザインを::before疑似要素の代わりに<span>を使用して作成しましたが、少し読みやすく、実際にはコードが少なくなっています。

<blockquote class="text-center text-2xl font-semibold text-gray-900 italic">
  When you look
  <span class="relative">
    <span class="absolute -inset-1 block -skew-y-3 bg-pink-500" aria-hidden="true"></span>
    <span class="relative text-white">annoyed</span>
  </span>
  all the time, people think that you're busy.
</blockquote>

疑似要素のコンテンツが実際にはDOMに存在せず、ユーザーが選択できないことが重要な状況のために、beforeとafterを保存してください。

::placeholder

placeholderバリアントを使用して、任意の入力またはテキストエリアのプレースホルダーテキストをスタイルします。

<input
  class="placeholder:text-gray-500 placeholder:italic ..."
  placeholder="Search for anything..."
  type="text"
  name="search"
/>

::file

fileバリアントを使用して、ファイル入力のボタンをスタイルします。

プロフィール写真を選択

<input
  type="file"
  class="file:mr-4 file:rounded-full file:border-0 file:bg-violet-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-violet-700 hover:file:bg-violet-100 dark:file:bg-violet-600 dark:file:text-violet-100 dark:hover:file:bg-violet-500 ..."
/>

::marker

markerバリアントを使用して、リスト内のカウンターまたは箇条書きをスタイルします。

<ul role="list" class="list-disc marker:text-sky-400 ...">
  <li>5 cups chopped Porcini mushrooms</li>
  <li>1/2 cup of olive oil</li>
  <li>3lb of celery</li>
</ul>

markerバリアントは継承可能になるように設計されているため、<li>要素で直接使用できますが、親で使用して繰り返しを避けることもできます。

::selection

selectionバリアントを使用して、アクティブなテキスト選択をスタイルします。

<div class="selection:bg-fuchsia-300 selection:text-fuchsia-900">
  <p>
    So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my
    way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all
    living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
  </p>
</div>

selectionバリアントは継承可能になるように設計されているため、ツリー内の任意の場所に追加でき、すべての子孫要素に適用されます。

これにより、サイト全体のブランドに合わせて選択色を簡単に設定できます。

<html>
  <head>
    <!-- ... -->
  </head>
  <body class="selection:bg-pink-300">
    <!-- ... -->
  </body>
</html>

::first-line および ::first-letter

first-lineバリアントを使用してコンテンツブロックの最初の行をスタイルし、first-letterバリアントを使用して最初の文字をスタイルします。

<div class="text-gray-700">
  <p
    class="first-letter:float-left first-letter:mr-3 first-letter:text-7xl first-letter:font-bold first-letter:text-gray-900 first-line:tracking-widest first-line:uppercase"
  >
    Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"?
  </p>
  <p class="mt-6">Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.</p>
</div>

::backdrop

backdropバリアントを使用して、ネイティブの<dialog>要素の背景幕をスタイルします。

<dialog class="backdrop:bg-gray-50">
  <form method="dialog">
    <!-- ... -->
  </form>
</dialog>

プロジェクトでネイティブの<dialog>要素を使用している場合は、openバリアントを使用した開閉状態のスタイリングについても読むことをお勧めします。

メディアおよび機能クエリ

レスポンシブブレークポイント

特定のブレークポイントで要素をスタイルするには、mdやlgのようなレスポンシブバリアントを使用します。

たとえば、これはモバイルで3列グリッド、ミディアム幅スクリーンで4列グリッド、ラージ幅スクリーンで6列グリッドをレンダリングします。

<div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
  <!-- ... -->
</div>

ビューポートの代わりに親要素の幅に基づいて要素をスタイルするには、@mdや@lgのようなバリアントを使用します。

<div class="@container">
  <div class="flex flex-col @md:flex-row">
    <!-- ... -->
  </div>
</div>

これらの機能の仕組みの詳細については、レスポンシブデザインのドキュメントをご覧ください。

prefers-color-scheme

prefers-color-schemeメディアクエリは、ユーザーがライトテーマとダークテーマのどちらを優先するかを示し、通常はオペレーティングシステムレベルで構成されます。

バリアントなしのユーティリティを使用してライトモードをターゲットにし、darkバリアントを使用してダークモードのオーバーライドを提供します。

<div class="bg-white dark:bg-gray-900 ...">
  <!-- ... -->
  <h3 class="text-gray-900 dark:text-white ...">Writes upside-down</h3>
  <p class="text-gray-500 dark:text-gray-400 ...">
    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
  </p>
</div>

この機能の仕組みの詳細については、ダークモードのドキュメントをご覧ください。

prefers-reduced-motion

prefers-reduced-motionメディアクエリは、ユーザーが不要なモーションを最小限に抑えるように要求したかどうかを示します。

ユーザーがモーションの削減を要求した場合に条件付きでスタイルを追加するには、motion-reduceバリアントを使用します。

<button type="button" class="bg-indigo-500 ..." disabled>
  <svg class="animate-spin motion-reduce:hidden ..." viewBox="0 0 24 24"><!-- ... --></svg>
  Processing...
</button>

Tailwindには、ユーザーがモーションの削減を要求していない場合にのみスタイルを追加するmotion-safeバリアントも含まれています。motion-reduceヘルパーを使用すると、多くのスタイルを「元に戻す」必要がある場合に役立ちます。

<!-- Using `motion-reduce` can mean lots of "undoing" styles -->
<button class="transition hover:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:translate-y-0 ...">
  Save changes
</button>
<!-- Using `motion-safe` is less code in these situations -->
<button class="motion-safe:transition motion-safe:hover:-translate-x-0.5 ...">Save changes</button>

prefers-contrast

prefers-contrastメディアクエリは、ユーザーがコントラストを高くするか低くするかを要求したかどうかを示します。

ユーザーがコントラストを高くするように要求した場合に条件付きでスタイルを追加するには、contrast-moreバリアントを使用します。

<label class="block">
  <span class="block text-sm font-medium text-gray-700">Social Security Number</span>
  <input
    class="border-gray-200 placeholder-gray-400 contrast-more:border-gray-400 contrast-more:placeholder-gray-500 ..."
  />
  <p class="text-gray-600 opacity-10 contrast-more:opacity-100 ...">We need this to steal your identity.</p>
</label>

Tailwindには、ユーザーがコントラストを低くするように要求した場合に条件付きでスタイルを追加するために使用できるcontrast-lessバリアントも含まれています。

forced-colors

forced-colorsメディアクエリは、ユーザーが強制カラーモードを使用しているかどうかを示します。これらのモードは、テキスト、背景、リンク、ボタンのユーザー定義パレットでサイトの色をオーバーライドします。

ユーザーが強制カラーモードを有効にした場合に条件付きでスタイルを追加するには、forced-colorsバリアントを使用します。

<label>
  <input type="radio" class="appearance-none forced-colors:appearance-auto" />
  <p class="hidden forced-colors:block">Cyan</p>
  <div class="bg-cyan-200 forced-colors:hidden ..."></div>
  <div class="bg-cyan-500 forced-colors:hidden ..."></div>
</label>

ユーザーが強制カラーモードを使用していない場合にスタイルを適用するには、not-forced-colorsバリアントを使用します。

<div class="not-forced-colors:appearance-none ...">
  <!-- ... -->
</div>

Tailwindには、強制カラーのオンとオフを切り替えるための強制カラー調整ユーティリティも含まれています。

inverted-colors

ユーザーが反転カラー スキームを有効にした場合に条件付きでスタイルを追加するには、inverted-colorsバリアントを使用します。

<div class="shadow-xl inverted-colors:shadow-none ...">
  <!-- ... -->
</div>

pointer および any-pointer

pointerメディアクエリは、ユーザーがマウスのようなプライマリポインティングデバイスを持っているかどうか、およびそのポインティングデバイスの精度を示します。

マウスやトラックパッドのような正確なポインティングデバイスをターゲットにするにはpointer-fineバリアントを使用し、タッチスクリーンなどの精度が低いポインティングデバイスをターゲットにするにはpointer-coarseバリアントを使用します。これは、タッチデバイスでより大きなクリックターゲットを提供する場合に役立ちます。

<fieldset aria-label="Choose a memory option">
  <div class="flex items-center justify-between">
    <div>RAM</div>
    <a href="#"> See performance specs </a>
  </div>
  <div class="mt-4 grid grid-cols-6 gap-2 pointer-coarse:mt-6 pointer-coarse:grid-cols-3 pointer-coarse:gap-4">
    <label class="p-2 pointer-coarse:p-4 ...">
      <input type="radio" name="memory-option" value="4 GB" className="sr-only" />
      <span>4 GB</span>
    </label>
    <!-- ... -->
  </div>
</fieldset>

pointerはプライマリポインティングデバイスのみをターゲットにしますが、any-pointerは利用可能な可能性のあるすべてのポインティングデバイスをターゲットにするために使用されます。接続されているポインティングデバイスの少なくとも1つが基準を満たしている場合に異なるスタイルを提供するには、any-pointer-fineおよびany-pointer-coarseバリアントを使用します。

ポインティングデバイスがない状態をターゲットにするには、pointer-noneおよびany-pointer-noneを使用できます。

orientation

ビューポートが特定の向きになっている場合に条件付きでスタイルを追加するには、portraitおよびlandscapeバリアントを使用します。

<div>
  <div class="portrait:hidden">
    <!-- ... -->
  </div>
  <div class="landscape:hidden">
    <p>This experience is designed to be viewed in landscape. Please rotate your device to view the site.</p>
  </div>
</div>

scripting

ユーザーがJavaScriptなどのスクリプトを有効にしているかどうかに基づいて条件付きでスタイルを追加するには、noscriptバリアントを使用します。

<div class="hidden noscript:block">
  <p>This experience requires JavaScript to function. Please enable JavaScript in your browser settings.</p>
</div>

print

ドキュメントが印刷されている場合にのみ適用されるスタイルを条件付きで追加するには、printバリアントを使用します。

<div>
  <article class="print:hidden">
    <h1>My Secret Pizza Recipe</h1>
    <p>This recipe is a secret, and must not be shared with anyone</p>
    <!-- ... -->
  </article>
  <div class="hidden print:block">Are you seriously trying to print this? It's secret!</div>
</div>

@supports

ユーザーのブラウザで特定の機能がサポートされているかどうかに基づいて何かをスタイルするには、supports-[...]バリアントを使用します。

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

内部的には、supports-[...]バリアントは@supports rulesを生成し、プロパティ/値のペア、さらにはandやorを使用した式など、@supports (...)で使用するものを角括弧の間に入れます。

簡潔にするために、プロパティがサポートされているかどうか（特定の値を指定する必要がない場合）のみを確認する必要がある場合は、プロパティ名を指定するだけで済みます。

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

ユーザーのブラウザで特定の機能がサポートされていないかどうかに基づいて何かをスタイルするには、not-supports-[...]バリアントを使用します。

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

プロジェクトで使用している一般的な@supportsルールのショートカットを構成するには、supports-*名前空間に新しいバリアントを作成します。

@custom-variant supports-grid {
  @supports (display: grid) {
    @slot;
  }
}

次に、これらのカスタムsupports-*バリアントをプロジェクトで使用できます。

<div class="supports-grid:grid">
  <!-- ... -->
</div>

@starting-style

要素がDOMで最初にレンダリングされたとき、またはdisplay: noneから可視にトランジションするときに要素の外観を設定するには、startingバリアントを使用します。

<div>
  <button popovertarget="my-popover">Check for updates</button>
  <div popover id="my-popover" class="opacity-0 starting:open:opacity-0 ...">
    <!-- ... -->
  </div>
</div>

属性セレクター

ARIAステート

ARIA属性に基づいて何かを条件付きでスタイルするには、aria-*バリアントを使用します。

たとえば、aria-checked属性がtrueに設定されている場合にbg-sky-700クラスを適用するには、aria-checked:bg-sky-700クラスを使用します。

<div aria-checked="true" class="bg-gray-600 aria-checked:bg-sky-700">
  <!-- ... -->
</div>

デフォルトでは、最も一般的なブールARIA属性のバリアントが含まれています。

新しいバリアントを作成することで、利用可能なaria-*バリアントをカスタマイズできます

@custom-variant aria-asc (&[aria-sort="ascending"]);
@custom-variant aria-desc (&[aria-sort="descending"]);

プロジェクトに含めるのが適切ではない単発のariaバリアントを使用する必要がある場合、または特定の値を取るより複雑なARIA属性の場合は、角括弧を使用して任意の値をその場でプロパティを生成します

<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-*バリアントを使用します。

データ属性が存在するかどうか（特定の値ではなく）を確認するには、属性名を指定するだけで済みます

<!-- Will apply -->
<div data-active class="border border-gray-300 data-active:border-purple-500">
  <!-- ... -->
</div>
<!-- Will not apply -->
<div class="border border-gray-300 data-active:border-purple-500">
  <!-- ... -->
</div>

特定の値を確認する必要がある場合は、任意の値を使用できます

<!-- 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>

または、data-*名前空間に新しいバリアントを作成して、プロジェクトで使用している一般的なデータ属性のショートカットを構成できます

@import "tailwindcss";
@custom-variant data-checked (&[data-ui~="checked"]);

その後、これらのカスタムdata-*バリアントをプロジェクトで使用できます

<div data-ui="checked active" class="data-checked:underline">
  <!-- ... -->
</div>

RTLサポート

多方向レイアウトを構築する際に、右から左および左から右モードで条件付きでスタイルを追加するには、rtlおよびltrバリアントを使用します

左から右

トム・クック

オペレーションディレクター

右から左

تامر كرم

الرئيس التنفيذي

<div class="group flex items-center">
  <img class="h-12 w-12 shrink-0 rounded-full" src="..." alt="" />
  <div class="ltr:ml-3 rtl:mr-3">
    <p class="text-gray-700 group-hover:text-gray-900 ...">...</p>
    <p class="text-gray-500 group-hover:text-gray-700 ...">...</p>
  </div>
</div>

これらのバリアントは、左から右と右から左の両方のレイアウトをサポートする必要があるサイトを構築する場合にのみ役立つことを覚えておいてください。単一方向のみをサポートする必要があるサイトを構築している場合は、これらのバリアントは必要ありません。コンテンツに合ったスタイルを適用するだけです。

オープン/クローズ状態

<details>または<dialog>要素が開いている状態の場合に条件付きでスタイルを追加するには、openバリアントを使用します

<details class="border border-transparent open:border-black/10 open:bg-gray-100 ..." open>
  <summary class="text-sm leading-6 font-semibold text-gray-900 select-none">Why do they call it Ovaltine?</summary>
  <div class="mt-3 text-sm leading-6 text-gray-600">
    <p>The mug is round. The jar is round. They should call it Roundtine.</p>
  </div>
</details>

このバリアントは、ポップオーバーの:popover-open疑似クラスもターゲットにします

<div>
  <button popovertarget="my-popover">Open Popover</button>
  <div popover id="my-popover" class="opacity-0 open:opacity-100 ...">
    <!-- ... -->
  </div>
</div>

inert要素のスタイリング

inertバリアントを使用すると、inert属性でマークされた要素をスタイルできます

<form>
  <legend>Notification preferences</legend>
  <fieldset>
    <input type="radio" />
    <label> Custom </label>
    <fieldset inert class="inert:opacity-50">
      <!-- ... -->
    </fieldset>
    <input type="radio" />
    <label> Everything </label>
  </fieldset>
</form>

これは、コンテンツのセクションがインタラクティブでないことを明確にする視覚的な手がかりを追加するのに役立ちます。

子セレクター

直接の子要素のスタイリング

ユーティリティクラスを子要素に直接配置することが一般的に推奨されますが、制御できない直接の子要素をスタイルする必要がある状況では、*バリアントを使用できます

<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>

子セレクターの特異性により、ユーティリティを使用して子要素自体のスタイルをオーバーライドすることはできないことに注意することが重要です

<ul class="*:bg-sky-50 ...">
  <li class="bg-red-50 ...">Sales</li>
  <li>Marketing</li>
  <li>SEO</li>
  <!-- ... -->
</ul>

すべての子孫のスタイリング

*と同様に、**バリアントを使用して要素の子要素をスタイルできます。主な違いは、**は直接の子要素だけでなく、すべての子孫にスタイルを適用することです。これは、選択するものを絞り込むために別のバリアントと組み合わせると特に役立ちます

<ul class="**:data-avatar:size-12 **:data-avatar:rounded-full ...">
  {#each items as item}
    <li>
      <img src={item.src} data-avatar />
      <p>{item.name}</p>
    </li>
  {/each}
</ul>

カスタムバリアント

任意のバリアントの使用

任意の値を使用すると、ユーティリティクラスでカスタム値を使用できるのと同様に、任意のバリアントを使用すると、カスタムセレクターバリアントをHTMLに直接記述できます。

任意のバリアントは、セレクターを表すフォーマット文字列であり、角括弧で囲まれています。たとえば、この任意のバリアントは、要素にis-draggingクラスがある場合にカーソルをgrabbingに変更します

<ul role="list">
  {#each items as item}
    <li class="[&.is-dragging]:cursor-grabbing">{item}</li>
  {/each}
</ul>

任意のバリアントは、Tailwindの他のバリアントと同様に、組み込みのバリアントまたは相互に積み重ねることができます

<ul role="list">
  {#each items as item}
    <li class="[&.is-dragging]:active:cursor-grabbing">{item}</li>
  {/each}
</ul>

セレクターにスペースが必要な場合は、アンダースコアを使用できます。たとえば、この任意のバリアントは、クラスを追加した要素内のすべてのp要素を選択します

<div class="[&_p]:mt-4">
  <p>Lorem ipsum...</p>
  <ul>
    <li>
      <p>Lorem ipsum...</p>
    </li>
    <!-- ... -->
  </ul>
</div>

任意のバリアントで@mediaや@supportsのようなat-rulesを使用することもできます

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

at-ruleカスタムバリアントでは、プリプロセッサでネストする場合と同様に、&プレースホルダーは必要ありません。

カスタムバリアントの登録

プロジェクトで同じ任意のバリアントを何度も使用している場合は、@custom-variantディレクティブを使用してカスタムバリアントを作成する価値があるかもしれません

@custom-variant theme-midnight (&:where([data-theme="midnight"] *));

これで、HTMLでtheme-midnight:<utility>バリアントを使用できます

<html data-theme="midnight">
  <button class="theme-midnight:bg-black ..."></button>
</html>

カスタムバリアントの追加の詳細については、カスタムバリアントの追加に関するドキュメントを参照してください。

付録

クイックリファレンス

デフォルトでTailwindに含まれるすべてのバリアントのクイックリファレンステーブル。

疑似クラスリファレンス

これは、ガイドの冒頭にある疑似クラスに関するドキュメントを補完するために、Tailwindに含まれるすべての疑似クラスバリアントの包括的な例のリストです。

:hover

hoverバリアントを使用して、ユーザーがマウスカーソルで要素をホバーしたときにスタイルを設定します

<div class="bg-black hover:bg-white ...">
  <!-- ... -->
</div>

:focus

focusバリアントを使用して、要素にフォーカスがあるときにスタイルを設定します

<input class="border-gray-300 focus:border-blue-400 ..." />

:focus-within

focus-withinバリアントを使用して、要素またはその子孫のいずれかにフォーカスがあるときにスタイルを設定します

<div class="focus-within:shadow-lg ...">
  <input type="text" />
</div>

:focus-visible

focus-visibleバリアントを使用して、キーボードを使用して要素がフォーカスされたときにスタイルを設定します

<button class="focus-visible:outline-2 ...">Submit</button>

:active

activeバリアントを使用して、要素が押されているときにスタイルを設定します

<button class="bg-blue-500 active:bg-blue-600 ...">Submit</button>

:visited

visitedバリアントを使用して、リンクがすでにアクセス済みのときにスタイルを設定します

<a href="https://seinfeldquotes.com" class="text-blue-600 visited:text-purple-600 ..."> Inspiration </a>

:target

targetバリアントを使用して、要素のIDが現在のURLフラグメントと一致する場合にスタイルを設定します

<div id="about" class="target:shadow-lg ...">
  <!-- ... -->
</div>

:first-child

firstバリアントを使用して、要素が最初の子である場合にスタイルを設定します

<ul>
  {#each people as person}
    <li class="py-4 first:pt-0 ...">
      <!-- ... -->
    </li>
  {/each}
</ul>

:last-child

lastバリアントを使用して、要素が最後の子である場合にスタイルを設定します

<ul>
  {#each people as person}
    <li class="py-4 last:pb-0 ...">
      <!-- ... -->
    </li>
  {/each}
</ul>

:only-child

onlyバリアントを使用して、要素が唯一の子である場合にスタイルを設定します

<ul>
  {#each people as person}
    <li class="py-4 only:py-0 ...">
      <!-- ... -->
    </li>
  {/each}
</ul>

:nth-child(odd)

oddバリアントを使用して、要素が奇数番目の子である場合にスタイルを設定します

<table>
  {#each people as person}
    <tr class="bg-white odd:bg-gray-100 ...">
      <!-- ... -->
    </tr>
  {/each}
</table>

:nth-child(even)

evenバリアントを使用して、要素が偶数番目の子である場合にスタイルを設定します

<table>
  {#each people as person}
    <tr class="bg-white even:bg-gray-100 ...">
      <!-- ... -->
    </tr>
  {/each}
</table>

:first-of-type

first-of-typeバリアントを使用して、要素がそのタイプの最初の子である場合にスタイルを設定します

<nav>
  <img src="/logo.svg" alt="Vandelay Industries" />
  {#each links as link}
    <a href="#" class="ml-2 first-of-type:ml-6 ...">
      <!-- ... -->
    </a>
  {/each}
</nav>

:last-of-type

last-of-typeバリアントを使用して、要素がそのタイプの最後の子である場合にスタイルを設定します

<nav>
  <img src="/logo.svg" alt="Vandelay Industries" />
  {#each links as link}
    <a href="#" class="mr-2 last-of-type:mr-6 ...">
      <!-- ... -->
    </a>
  {/each}
  <button>More</button>
</nav>

:only-of-type

only-of-typeバリアントを使用して、要素がそのタイプの唯一の子である場合にスタイルを設定します

<nav>
  <img src="/logo.svg" alt="Vandelay Industries" />
  {#each links as link}
    <a href="#" class="mx-2 only-of-type:mx-6 ...">
      <!-- ... -->
    </a>
  {/each}
  <button>More</button>
</nav>

:nth-child()

nthバリアントを使用して、特定のポジションにある要素をスタイル設定します

<nav>
  <img src="/logo.svg" alt="Vandelay Industries" />
  {#each links as link}
    <a href="#" class="mx-2 nth-3:mx-6 nth-[3n+1]:mx-7 ...">
      <!-- ... -->
    </a>
  {/each}
  <button>More</button>
</nav>

:nth-last-child()

nth-lastバリアントを使用して、最後から特定のポジションにある要素をスタイル設定します

<nav>
  <img src="/logo.svg" alt="Vandelay Industries" />
  {#each links as link}
    <a href="#" class="mx-2 nth-last-3:mx-6 nth-last-[3n+1]:mx-7 ...">
      <!-- ... -->
    </a>
  {/each}
  <button>More</button>
</nav>

:nth-of-type()

nth-of-typeバリアントを使用して、同じタイプの特定のポジションにある要素をスタイル設定します

<nav>
  <img src="/logo.svg" alt="Vandelay Industries" />
  {#each links as link}
    <a href="#" class="mx-2 nth-of-type-3:mx-6 nth-of-type-[3n+1]:mx-7 ...">
      <!-- ... -->
    </a>
  {/each}
  <button>More</button>
</nav>

:nth-last-of-type()

nth-last-of-typeバリアントを使用して、最後から同じタイプの特定のポジションにある要素をスタイル設定します

<nav>
  <img src="/logo.svg" alt="Vandelay Industries" />
  {#each links as link}
    <a href="#" class="mx-2 nth-last-of-type-3:mx-6 nth-last-of-type-[3n+1]:mx-7 ...">
      <!-- ... -->
    </a>
  {/each}
  <button>More</button>
</nav>

:empty

emptyバリアントを使用して、要素にコンテンツがない場合にスタイルを設定します

<ul>
  {#each people as person}
    <li class="empty:hidden ...">{person.hobby}</li>
  {/each}
</ul>

:disabled

disabledバリアントを使用して、入力が無効になっている場合にスタイルを設定します

<input class="disabled:opacity-75 ..." />

:enabled

enabledバリアントを使用して、入力が有効になっている場合にスタイルを設定します。要素が無効になっていない場合にのみ別のスタイルを適用する場合に最も役立ちます

<input class="enabled:hover:border-gray-400 disabled:opacity-75 ..." />

:checked

checkedバリアントを使用して、チェックボックスまたはラジオボタンがチェックされている場合にスタイルを設定します

<input type="checkbox" class="appearance-none checked:bg-blue-500 ..." />

:indeterminate

indeterminateバリアントを使用して、チェックボックスまたはラジオボタンが中間状態の場合にスタイルを設定します

<input type="checkbox" class="appearance-none indeterminate:bg-gray-300 ..." />

:default

defaultバリアントを使用して、ページが最初にロードされたときのデフォルト値であったオプション、チェックボックス、またはラジオボタンにスタイルを設定します

<input type="checkbox" class="default:outline-2 ..." />

:optional

optionalバリアントを使用して、入力がオプションの場合にスタイルを設定します

<input class="border optional:border-red-500 ..." />

:required

requiredバリアントを使用して、入力が必須の場合にスタイルを設定します

<input required class="border required:border-red-500 ..." />

:valid

validバリアントを使用して、入力が有効な場合にスタイルを設定します

<input required class="border valid:border-green-500 ..." />

:invalid

invalidバリアントを使用して、入力が無効な場合にスタイルを設定します

<input required class="border invalid:border-red-500 ..." />

:user-valid

user-validバリアントを使用して、入力が有効で、ユーザーが操作した場合にスタイルを設定します

<input required class="border user-valid:border-green-500" />

:user-invalid

user-invalidバリアントを使用して、入力が無効で、ユーザーが操作した場合にスタイルを設定します

<input required class="border user-invalid:border-red-500" />

:in-range

in-rangeバリアントを使用して、入力値が指定された範囲制限内にある場合にスタイルを設定します

<input min="1" max="5" class="in-range:border-green-500 ..." />

:out-of-range

out-of-rangeバリアントを使用して、入力値が指定された範囲制限外にある場合にスタイルを設定します

<input min="1" max="5" class="out-of-range:border-red-500 ..." />

:placeholder-shown

placeholder-shownバリアントを使用して、プレースホルダーが表示されている場合に入力をスタイル設定します

<input class="placeholder-shown:border-gray-500 ..." placeholder="you@example.com" />

:details-content

details-contentバリアントを使用して、<details>要素のコンテンツをスタイル設定します

<details class="details-content:bg-gray-100 ...">
  <summary>Details</summary>
  This is a secret.
</details>

:autofill

autofillバリアントを使用して、ブラウザによって入力が自動入力された場合にスタイルを設定します

<input class="autofill:bg-yellow-200 ..." />

:read-only

read-onlyバリアントを使用して、入力が読み取り専用の場合にスタイルを設定します

<input class="read-only:bg-gray-100 ..." />