Visibility

Class	Style
v-c	visibility: collapse;
v-h	visibility: hidden;
v-v	visibility: visible;

Visible

Initial value

The element will be displayed and take up space in the layout.

A

B

C

<div class="d-g g-4 gtc-1 sm:gtc-3">
  <div class="ai-c bg-indigo d-f jc-c p-6 rad-1 tc-white v-v">A</div>
  <div class="ai-c bg-indigo d-f jc-c p-6 rad-1 tc-white">B</div>
  <div class="ai-c bg-indigo d-f jc-c p-6 rad-1 tc-white">C</div>
</div>

Collapse

The element will be hidden, and it will not take up any space in the layout.

H1	H2
A	B
C	D
E	F

<table class="bc-c ta-c tc-indigo w-full">
  <thead>
    <tr>
      <th class="b-1 bc-indigo bg-indigo-1 p-2">H1</th>
      <th class="b-1 bc-indigo bg-indigo-1 p-2">H2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="b-1 bc-indigo p-2">A</td>
      <td class="b-1 bc-indigo p-2">B</td>
    </tr>
    <tr class="v-c">
      <td class="b-1 bc-indigo p-2">C</td>
      <td class="b-1 bc-indigo p-2">D</td>
    </tr>
    <tr>
      <td class="b-1 bc-indigo p-2">E</td>
      <td class="b-1 bc-indigo p-2">F</td>
    </tr>
  </tbody>
</table>

Hidden

The element will be hidden, but it will still take up space in the layout.

A

B

C

<div class="d-g g-4 gtc-1 sm:gtc-3">
  <div class="ai-c bg-indigo d-f jc-c p-6 rad-1 tc-white v-h">A</div>
  <div class="ai-c bg-indigo d-f jc-c p-6 rad-1 tc-white">B</div>
  <div class="ai-c bg-indigo d-f jc-c p-6 rad-1 tc-white">C</div>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Breakpoint variant

You can combine responsive breakpoints like sm:v-*,md:v-*, lg:v-*, and xxl:v-* to allow targeting specific utilities in different viewports.

<div class="v-i md:p-v ..."></div>

Hover variant

Alternatively, you can apply :hover by using h:v-* utility to override elements and change their values when hovering over them.

<div class="v-i h:p-v ..."></div>