Isolation
Controls whether an element must create a new stacking context.
| Utility | Properties | Failed to load data. Please try again later. |
|---|
Auto
Initial value
This example sets the isolation to auto. The element will use the default isolation behavior, allowing overlapping elements to blend together.
<div class="i-auto ..."></div>Isolate
This example sets the isolation to isolate. The element will create a new stacking context, preventing overlapping elements from blending with the background.
<div class="i-i ..."></div>Conditional styles
Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.
Media modifier
You can combine responsive breakpoints like sm:-*,md:-*, lg:-*, and xxl:-* allows targeting specific utilities in different viewports.
<div class="i-auto md:i-i ..."></div>Hover modifier
Alternatively, you can apply :hover by using h:-* utility to override elements and change their values when hovering over them.
<div class="i-auto h:i-i ..."></div>