isolation
Utilities for controlling whether an element should explicitly create a new stacking context.
| Class | Styles |
|---|---|
isolate | |
isolation: isolate; |
|
| isolation-auto |
isolation: auto;
|
Use the isolate and isolation-auto utilities to control whether an element should explicitly create a new stacking context:
<div class="isolate ..."> <!-- ... --></div>
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.
On this page

5-day mini-course
Build UIs that don’t suck.
Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.
Copyright © 2026 Tailwind Labs Inc.·Trademark Policy