Skip to content

isolation

Utilities for controlling whether an element should explicitly create a new stacking context.

Quick reference

ClassStyles
isolateisolation: isolate;
isolation-autoisolation: auto;

Source: https://tailwindcss.com/guide/isolation

Examples

Basic example

Use the isolate utility to create a new stacking context:

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

Responsive design

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

html
<div class="isolate md:isolation-auto ...">Lorem ipsum dolor sit amet...</div>

Learn more about using variants in the variants documentation.

Released under the MIT License.