Tailwind CSS - Isolation

Modern Tailwind CSS: Isolation

The isolation utilities control whether an element should create a new stacking context. This is an advanced but powerful concept for managing z-index and mix-blend-mode effects.

What is a Stacking Context?

A stacking context is like a new, independent layering world for a set of elements. Inside a stacking context, z-index values are only compared against other elements in the same context. This prevents children of one element from unexpectedly appearing above or below other unrelated elements on the page.

Using isolate on an element is the most direct way to create a new stacking context.

Class	CSS Properties	Description
isolate	isolation: isolate;	Creates a new stacking context. This contains z-index and blending effects within the element.
isolation-auto	isolation: auto;	The default value. Does not create a new stacking context.

Practical Example: Taming mix-blend-mode

A common use case for isolate is to contain a blend mode. In the example below, we have a background and some text. On the right, the text has mix-blend-multiply, which blends it with the background.

Without isolate, the blend effect is contained by the div. With isolate, the blend effect is contained within the div it’s applied to, preventing it from blending with the page’s main background.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Isolation Example</title>
</head>
<body class="bg-slate-200">

  <div class="relative grid grid-cols-1 md:grid-cols-2 gap-8 p-8">

    <!-- Card without isolation -->
    <div class="p-8 bg-amber-300 rounded-xl">
      <h3 class="font-bold text-lg mb-2">Without `isolate`</h3>
      <div class="w-32 h-32 bg-cyan-400 mix-blend-multiply"></div>
      <p class="-mt-12 ml-6 font-black text-5xl text-white">Text</p>
      <p class="mt-4 text-sm">The cyan box and 'Text' blend with the amber background because there is no isolated stacking context.</p>
    </div>

    <!-- Card with isolation -->
    <div class="isolate p-8 bg-amber-300 rounded-xl">
      <h3 class="font-bold text-lg mb-2">With `isolate`</h3>
      <div class="w-32 h-32 bg-cyan-400 mix-blend-multiply"></div>
      <p class="-mt-12 ml-6 font-black text-5xl text-white">Text</p>
      <p class="mt-4 text-sm">Here, `isolate` on the parent creates a new stacking context. The blending happens *inside* this context only.</p>
    </div>

  </div>

</body>
</html>

Common Pitfalls and Debugging

Problem: An element with z-index: -1 is disappearing behind the main page background.

Solution: Apply isolate to its parent element. This creates a new stacking context, so z-index: -1 will now place the element at the bottom of its parent’s stacking context, not the entire page’s.