Tailwind CSS - 隔离

Tailwind CSS 隔离是一个实用程序类，用于控制元素是否应显式创建新的堆叠上下文，而不会影响其他元素。

Tailwind CSS 隔离类

以下是Tailwind CSS 隔离类列表，它提供了一种有效的方法来显式创建新的堆叠上下文。

类	CSS 属性
isolate	isolation: isolate;
isolation-auto	isolation: auto;

Tailwind CSS 清除类的功能

Isolate: 此类替换 CSS isolation: isolate; 属性。此类有助于创建新的堆叠上下文，而不会影响其他元素。
Isolation-auto: 此类替换 CSS isolation: auto; 属性。它具有默认行为，允许元素与其他元素交互。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 隔离类示例

以下示例将说明 Tailwind CSS 隔离类实用程序。

隔离堆叠上下文

以下示例说明了Tailwind CSS isolate类的用法。

示例

Open Compiler

<!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>

自动隔离堆叠上下文

以下示例说明了Tailwind CSS Isolation-Auto类的用法。

示例

Open Compiler

<!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>

打印页面