Visibility

Show or hide an element while it keeps its place in the layout.

Use visibility to hide an element while preserving its place in layout, or make it visible again. Choose hidden from the display family when the box should be removed and following content should move into its place.

Quick reference

Example class	Expected declarations
`invisible`	`visibility: hidden;`
`visible`	`visibility: visible;`

Example setup

Every preview explicitly starts from spec 1, reset "none", strict mode, spacingUnit "0.25rem", and no breakpoints. Numeric spacing values multiply that unit; no Tailwind theme is inherited. wind-demo classes are authored presentation scaffolding, with their CSS shown beside the exact HTML source.

Examples in use

Hide while reserving space

invisible hides the middle box but preserves its flex slot, so the final box stays at the same position.

Hide while reserving space

HTML

<div class="wind-demo">
  <div class="wind-demo-frame flex items-center gap-2">
    <div class="wind-demo-tile">Visible</div>
    <div class="wind-demo-tile invisible">Invisible box</div>
    <div class="wind-demo-tile">Space is still reserved</div>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}
.invisible {
  visibility: hidden;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "flex",
        "gap-2",
        "invisible",
        "items-center"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

Compare visibility and display

invisible retains a slot; hidden removes its slot, and visible makes the last item render normally.

Compare visibility and display

HTML

<div class="wind-demo">
  <p class="wind-demo-note">invisible keeps its flex slot; hidden removes its slot from layout.</p>
  <div class="wind-demo-frame flex items-center gap-2">
    <div class="wind-demo-tile">First</div>
    <div class="wind-demo-tile invisible">Invisible</div>
    <div class="wind-demo-tile hidden">Hidden</div>
    <div class="wind-demo-tile visible">Visible again</div>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.flex {
  display: flex;
}
.hidden {
  display: none;
}
.items-center {
  align-items: center;
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}
.invisible {
  visibility: hidden;
}
.visible {
  visibility: visible;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "flex",
        "gap-2",
        "hidden",
        "invisible",
        "items-center",
        "visible"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

Custom and named values

This family has two exact class names and no custom values: visible sets visibility:visible and invisible sets visibility:hidden. The box keeps its layout space, while visibility:hidden content is generally omitted from the accessibility tree and cannot be interacted with. hidden is a separate display:none utility.

Related guides: Utility grammar · Variants

Catalog details

invisible

Field	Value
Catalog identifier	`v1.invisible`
Class pattern	`invisible`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`visibility` (`47`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`visibility`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"hidden"`

Declaration templates

Property	Value kind	Fixed value
`visibility`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`invisible`	`visibility: hidden`

visible

Field	Value
Catalog identifier	`v1.visible`
Class pattern	`visible`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`visibility` (`47`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`visibility`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"visible"`

Declaration templates

Property	Value kind	Fixed value
`visibility`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`visible`	`visibility: visible`

Visibility

Quick reference

Examples in use

Hide while reserving space

Compare visibility and display

Custom and named values

invisible

Accepted values

Declaration templates

Catalog examples

visible

Accepted values

Declaration templates

Catalog examples

Revision History