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; 屬性。它具有預設行為，允許元素與其他元素互動。

Tailwind CSS 隔離類示例

以下示例將說明 Tailwind CSS 隔離類實用程式。

隔離堆疊上下文

以下示例說明了Tailwind CSS isolate類的用法。

示例

<!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類的用法。

示例

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

列印頁面