Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Isolation

Quiz

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>

Print Page