Isolation

import { ApiTable } from "@/components/api-table.tsx"; import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "isolation"; export const description = "Utilities for controlling whether an element should explicitly create a new stacking context.";

Examples

Basic example

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

<!-- [!code classes:isolate] -->
<div class="isolate ...">
  <!-- ... -->
</div>

Responsive design