Visibility

Utility	Properties
Error: 429

Collapse

This example sets the visibility to 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

This example sets the visibility to 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>

Visible

Initial value

This example sets the visibility to visible. 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>

Conditional styles

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

Media modifier

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

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

Hover modifier

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

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