Tailwind CSS - Isolation


Tailwind CSS Isolation is a utility class for controlling whether an element should explicitly create a new stacking context without affecting the other elements.

Tailwind CSS Isolation Classes

The following is the list of Tailwind CSS Isolation Classes that provides an effective way to explicitly create a new stacking context.

Class CSS Properties
isolate isolation: isolate;
isolation-auto isolation: auto;

Functionality of Tailwind CSS Clear Classes

  • Isolate: This class replaces the CSS isolation: isolate; property. This class helps to create a new stacking context without affecting the other elements.
  • Isolation-auto: This class replaces CSS isolation: auto; property. It has a default behavior allowing elements to interact with other elements.

Tailwind CSS Isolation Class Examples

The following examples will illustrate the Tailwind CSS Isolation class utility.

Isolation Stacking Context

The below example is illustrating the use of Tailwind CSS isolate Class.

Example

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="font-bold text-3xl mb-3">
        Tailwind CSS Isolation
    </h2>
    <div class="bg-amber-200 w-64 h-52 p-4">
        <div class="isolate">
            <h3 class="w-32 h-32 border-4 
                       p-4 border-red-400 
                       mix-blend-difference 
                       ml-12 mt-6">
                Tailwind CSS isolate Class
            </h3>
        </div>
    </div>
</body>

</html>

Auto Isolation Stacking Context

The below example is illustrating the use of Tailwind CSS Isolation-Auto Class.

Example

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="font-bold text-3xl mb-3">
        Tailwind CSS Isolation
    </h2>
    <div class="bg-amber-200 w-64 h-52 p-4">
        <div class="isolation-auto">
            <h3 class="w-32 h-32 border-4 
                       p-4 border-red-400 
                       mix-blend-difference 
                       ml-12 mt-6">
                Tailwind CSS isolation-auto Class
            </h3>
        </div>
    </div>
</body>

</html>