Tailwind CSS - Isolation
Tailwind CSS Isolation 是一个实用类，用于控制元素是否应在不影响其他元素的情况下显式创建新的堆叠上下文。
Tailwind CSS Isolation 类
以下是 Tailwind CSS Isolation 类的列表，这些类提供了一种有效的显式创建新堆叠上下文的方法。
| 类 | CSS 属性 |
|---|---|
| isolate | isolation: isolate; |
| isolation-auto | isolation: auto; |
Tailwind CSS Clear Classes 的功能
- Isolate:此类替换了 CSS isolation: isolate; 属性。此类有助于创建新的堆叠上下文，而不会影响其他元素。
- Isolation-auto:此类替换了 CSS isolation: auto; 属性。它具有默认行为，允许元素与其他元素交互。
Tailwind CSS Isolation 类示例
以下示例将说明 Tailwind CSS Isolation 类的实用功能。
隔离堆叠上下文
以下示例说明了 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>
