Isolation

Utility	Properties
i-auto	isolation: auto;
i-i	isolation: isolate;

Auto

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 modifiers

You can combine responsive breakpoints like sm:i-*,md:i-*, lg:i-*, and xxl:i-* allows targeting specific utilities in different viewports.

<div class="i-auto md:i-i ..."></div>

Hover modifiers

Alternatively, you can apply :hover by using h:i-* utility to override elements and change their values when hovering over them.

<div class="i-auto h:i-i ..."></div>