1. Layout
  2. isolation

Layout

isolation

Use the `isolate` and `isolation-auto` utilities to control whether an element should explicitly create a new stacking context

ClassStyles
isolate
isolation: isolate;
isolation-auto
isolation: auto;

Examples

Setting the stacking context

Use the isolate and isolation-auto utilities to control whether an element should explicitly create a new stacking context.

<div class="isolate ...">  <!-- ... --></div>

Responsive design

Prefix an isolation utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="isolate md:isolation-auto">  <!-- ... --></div>

Learn more about using variants in the variants documentation.

Copyright © 2024 Tailwind Labs Inc.·Trademark Policy