📄 tailwindcss/docs/isolation

File: isolation.md | Updated: 11/15/2025

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

v4.1

⌘KCtrl KDocs Blog Showcase Sponsor Plus

  1. Layout
  2. isolation

Layout

isolation

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

| Class | Styles | | --- | --- | | isolate | isolation: isolate; | | isolation-auto | isolation: auto; |

Examples


Basic example

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 .

On this page

Copyright © 2025 Tailwind Labs Inc.·Trademark Policy