tailwindcss/tests/variants.test.html

<!-- Basic pseudo variants -->
<div class="first:flex"></div>
<div class="last:flex"></div>
<div class="only:flex"></div>
<div class="even:flex"></div>
<div class="odd:flex"></div>
<div class="first-of-type:flex"></div>
<div class="last-of-type:flex"></div>
<div class="only-of-type:flex"></div>
<div class="hover:flex"></div>
<div class="focus:flex"></div>
<div class="enabled:flex"></div>
<div class="disabled:flex"></div>
<div class="active:flex"></div>
<div class="target:flex"></div>
<div class="open:flex"></div>
<div class="visited:flex"></div>
<div class="default:flex"></div>
<div class="checked:flex"></div>
<div class="indeterminate:flex"></div>
<div class="placeholder-shown:flex"></div>
<div class="autofill:flex"></div>
<div class="focus-within:flex"></div>
<div class="focus-visible:flex"></div>
<div class="optional:flex"></div>
<div class="required:flex"></div>
<div class="valid:flex"></div>
<div class="invalid:flex"></div>
<div class="in-range:flex"></div>
<div class="out-of-range:flex"></div>
<div class="read-only:flex"></div>
<div class="empty:flex"></div>

<!-- Pseudo-element variants -->
<div class="first-letter:flex"></div>
<div class="first-line:flex"></div>
<ul>
  <li class="marker:flex"></li>
</ul>
<div class="selection:flex"></div>
<div class="file:flex"></div>
<div class="before:flex"></div>
<div class="after:flex"></div>
<div class="placeholder:flex"></div>
<dialog class="backdrop:flex"></dialog>

<!-- Group variants -->
<div class="group-open:flex"></div>
<div class="group-first:flex"></div>
<div class="group-last:flex"></div>
<div class="group-only:flex"></div>
<div class="group-even:flex"></div>
<div class="group-odd:flex"></div>
<div class="group-first-of-type:flex"></div>
<div class="group-last-of-type:flex"></div>
<div class="group-only-of-type:flex"></div>
<div class="group-hover:flex"></div>
<div class="group-focus:flex"></div>
<div class="group-enabled:flex"></div>
<div class="group-disabled:flex"></div>
<div class="group-active:flex"></div>
<div class="group-target:flex"></div>
<div class="group-visited:flex"></div>
<div class="group-default:flex"></div>
<div class="group-checked:flex"></div>
<div class="group-indeterminate:flex"></div>
<div class="group-placeholder-shown:flex"></div>
<div class="group-autofill:flex"></div>
<div class="group-focus-within:flex"></div>
<div class="group-focus-visible:flex"></div>
<div class="group-optional:flex"></div>
<div class="group-required:flex"></div>
<div class="group-valid:flex"></div>
<div class="group-invalid:flex"></div>
<div class="group-in-range:flex"></div>
<div class="group-out-of-range:flex"></div>
<div class="group-read-only:flex"></div>
<div class="group-empty:flex"></div>

<!-- Peer variants -->
<div class="peer-open:flex"></div>
<div class="peer-first:flex"></div>
<div class="peer-last:flex"></div>
<div class="peer-only:flex"></div>
<div class="peer-even:flex"></div>
<div class="peer-odd:flex"></div>
<div class="peer-first-of-type:flex"></div>
<div class="peer-last-of-type:flex"></div>
<div class="peer-only-of-type:flex"></div>
<div class="peer-hover:flex"></div>
<div class="peer-focus:flex"></div>
<div class="peer-enabled:flex"></div>
<div class="peer-disabled:flex"></div>
<div class="peer-active:flex"></div>
<div class="peer-target:flex"></div>
<div class="peer-visited:flex"></div>
<div class="peer-default:flex"></div>
<div class="peer-checked:flex"></div>
<div class="peer-indeterminate:flex"></div>
<div class="peer-placeholder-shown:flex"></div>
<div class="peer-autofill:flex"></div>
<div class="peer-focus-within:flex"></div>
<div class="peer-focus-visible:flex"></div>
<div class="peer-optional:flex"></div>
<div class="peer-required:flex"></div>
<div class="peer-valid:flex"></div>
<div class="peer-invalid:flex"></div>
<div class="peer-in-range:flex"></div>
<div class="peer-out-of-range:flex"></div>
<div class="peer-read-only:flex"></div>
<div class="peer-empty:flex"></div>

<!-- Reduced motion variants -->
<div class="motion-safe:flex"></div>
<div class="motion-reduce:flex"></div>

<!-- Direction variants -->
<div class="rtl:flex"></div>
<div class="ltr:flex"></div>

<!-- Dark mode variants -->
<div class="dark:flex"></div>

<!-- Forced colors variant -->
<div class="forced-colors:flex"></div>

<!-- Print variant -->
<div class="print:flex"></div>

<!-- Screen variants -->
<div class="sm:flex"></div>
<div class="md:flex"></div>
<div class="lg:flex"></div>
<div class="xl:flex"></div>
<div class="2xl:flex"></div>
<div class="lg:flex"></div>
<div class="hover:flex"></div>

<!-- Orientation variants -->
<div class="portrait:flex"></div>
<div class="landscape:flex"></div>

<!-- Prefers contrast variants -->
<div class="contrast-more:flex"></div>
<div class="contrast-less:flex"></div>

<!-- Stacked variants -->
<div class="open:hover:flex"></div>
<div class="file:hover:flex"></div>
<div class="focus:hover:flex"></div>
<div class="sm:active:flex"></div>
<div class="md:group-focus:flex"></div>
<div class="lg:dark:flex"></div>
<div class="xl:dark:disabled:flex"></div>
<div class="2xl:dark:motion-safe:focus-within:flex"></div>

<!-- Stacked group variants -->
<div class="group-open:group-focus:flex"></div>
<div class="group-open:group-hover:flex"></div>
<div class="group-focus:group-hover:flex"></div>
<div class="group-disabled:group-focus:group-hover:flex"></div>
<div class="dark:group-disabled:group-focus:group-hover:flex"></div>
<div class="group-disabled:group-focus:group-hover:first:flex"></div>

<!-- Stacked peer variants -->
<div class="peer-focus:peer-hover:flex"></div>
<div class="peer-disabled:peer-focus:peer-hover:flex"></div>
<div class="dark:peer-disabled:peer-focus:peer-hover:flex"></div>
<div class="peer-disabled:peer-focus:peer-hover:first:flex"></div>