isolate creates a stacking context on demand; invisible/collapse hide while preserving layout. This family contains 5 generated classes in Nakshora 3.0.

Classes#

ClassGenerated CSS
visiblevisibility: visible;
invisiblevisibility: hidden;
collapsevisibility: collapse;
isolateisolation: isolate;
isolation-autoisolation: auto;

Example#

example
html
<div class="isolate">
  <div class="absolute z-10">…</div>
</div>

Responsive & variants#

Every class here accepts screen prefixes (sm: … xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • invisible keeps the box (layout stable); hidden removes it
  • isolate is the surgical alternative to z-index arms races

Common mistakes#

  • Using invisible when you meant hidden (or vice versa) — check layout impact

utilities/spacing/margin|Margin · utilities/sizing/width|Width · responsive/index|Responsive