ContextQMD
Back to Tailwindcss

Visibility

src/docs/visibility.mdx

latest12.1 KB
Original Source

import { Stripes } from "@/components/stripes.tsx"; import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "visibility"; export const description = "Utilities for controlling the visibility of an element.";

<ApiTable rows={[ ["visible", "visibility: visible;"], ["invisible", "visibility: hidden;"], ["collapse", "visibility: collapse;"], ]} />

Examples

Making elements invisible

Use the invisible utility to hide an element, but still maintain its place in the document, affecting the layout of other elements:

<Figure> <Example> { <div className="grid grid-cols-1"> <Stripes border className="col-start-1 row-start-1 rounded-lg" /> <div className="col-start-1 row-start-1 grid grid-cols-3 gap-4 font-mono text-sm leading-6 font-bold text-white"> <div className="flex items-center justify-center rounded-lg bg-cyan-500 p-4">01</div> <div className="invisible flex items-center justify-center rounded-lg bg-cyan-500 p-4">02</div> <div className="flex items-center justify-center rounded-lg bg-cyan-500 p-4">03</div> </div> </div> } </Example>
html
<!-- [!code classes:invisible] -->
<div class="grid grid-cols-3 gap-4">
  <div>01</div>
  <div class="invisible ...">02</div>
  <div>03</div>
</div>
</Figure>

To completely remove an element from the document, use the display property instead.

Collapsing elements

Use the collapse utility to hide table rows, row groups, columns, and column groups as if they were set to display: none, but without impacting the size of other rows and columns:

<Figure> <Example padding={false}> { <div className="py-8"> <div className="mb-3 pl-4 text-sm font-medium text-gray-500 dark:text-gray-400">Showing all rows</div> <table className="w-full border-collapse border-y border-gray-400 bg-white text-sm dark:border-gray-500 dark:bg-gray-800"> <thead className="bg-gray-50 dark:bg-gray-700"> <tr> <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-gray-900 first:border-l-0 last:border-r-0 dark:border-gray-600 dark:text-gray-200"> Invoice # </th> <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-gray-900 first:border-l-0 last:border-r-0 dark:border-gray-600 dark:text-gray-200"> Client </th> <th className="border border-gray-300 px-4 py-3 text-right font-semibold text-gray-900 first:border-l-0 last:border-r-0 dark:border-gray-600 dark:text-gray-200"> Amount </th> </tr> </thead> <tbody> <tr> <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> #100 </td> <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> Pendant Publishing </td> <td className="border border-gray-300 px-4 py-3 text-right text-gray-500 tabular-nums first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> $2,000.00 </td> </tr> <tr> <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> #101 </td> <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> Kruger Industrial Smoothing </td> <td className="border border-gray-300 px-4 py-3 text-right text-gray-500 tabular-nums first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> $545.00 </td> </tr> <tr> <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> #102 </td> <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> J. Peterman </td> <td className="border border-gray-300 px-4 py-3 text-right text-gray-500 tabular-nums first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> $10,000.25 </td> </tr> </tbody> </table> <div className="mt-10 mb-3 pl-4 text-sm font-medium text-gray-500 dark:text-gray-400"> Hiding a row using <code className="text-xs text-gray-700 dark:text-gray-300">`collapse`</code> </div> <table className="w-full border-collapse border-y border-gray-400 bg-white text-sm dark:border-gray-500 dark:bg-gray-800"> <thead className="bg-gray-50 dark:bg-gray-700"> <tr> <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-gray-900 first:border-l-0 last:border-r-0 dark:border-gray-600 dark:text-gray-200"> Invoice # </th> <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-gray-900 first:border-l-0 last:border-r-0 dark:border-gray-600 dark:text-gray-200"> Client </th> <th className="border border-gray-300 px-4 py-3 text-right font-semibold text-gray-900 first:border-l-0 last:border-r-0 dark:border-gray-600 dark:text-gray-200"> Amount </th> </tr> </thead> <tbody> <tr> <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> #100 </td> <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> Pendant Publishing </td> <td className="border border-gray-300 px-4 py-3 text-right text-gray-500 tabular-nums first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> $2,000.00 </td> </tr> <tr className="collapse"> <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> #101 </td> <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> Kruger Industrial Smoothing </td> <td className="border border-gray-300 px-4 py-3 text-right text-gray-500 tabular-nums first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> $545.00 </td> </tr> <tr> <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> #102 </td> <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> J. Peterman </td> <td className="border border-gray-300 px-4 py-3 text-right text-gray-500 tabular-nums first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> $10,000.25 </td> </tr> </tbody> </table> <div className="mt-10 mb-3 pl-4 text-sm font-medium text-gray-500 dark:text-gray-400"> Hiding a row using <code className="text-xs text-gray-700 dark:text-gray-300">`hidden`</code> </div> <table className="w-full border-collapse border-y border-gray-400 bg-white text-sm dark:border-gray-500 dark:bg-gray-800"> <thead className="bg-gray-50 dark:bg-gray-700"> <tr> <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-gray-900 first:border-l-0 last:border-r-0 dark:border-gray-600 dark:text-gray-200"> Invoice # </th> <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-gray-900 first:border-l-0 last:border-r-0 dark:border-gray-600 dark:text-gray-200"> Client </th> <th className="border border-gray-300 px-4 py-3 text-right font-semibold text-gray-900 first:border-l-0 last:border-r-0 dark:border-gray-600 dark:text-gray-200"> Amount </th> </tr> </thead> <tbody> <tr> <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> #100 </td> <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> Pendant Publishing </td> <td className="border border-gray-300 px-4 py-3 text-right text-gray-500 tabular-nums first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> $2,000.00 </td> </tr> <tr className="hidden"> <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> #101 </td> <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> Kruger Industrial Smoothing </td> <td className="border border-gray-300 px-4 py-3 text-right text-gray-500 tabular-nums first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> $545.00 </td> </tr> <tr> <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> #102 </td> <td className="border border-gray-300 px-4 py-3 text-gray-500 first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> J. Peterman </td> <td className="border border-gray-300 px-4 py-3 text-right text-gray-500 tabular-nums first:border-l-0 last:border-r-0 dark:border-gray-700 dark:text-gray-400"> $10,000.25 </td> </tr> </tbody> </table> </div> } </Example>
html
<!-- [!code classes:collapse] -->
<table>
  <thead>
    <tr>
      <th>Invoice #</th>
      <th>Client</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>#100</td>
      <td>Pendant Publishing</td>
      <td>$2,000.00</td>
    </tr>
    <tr class="collapse">
      <td>#101</td>
      <td>Kruger Industrial Smoothing</td>
      <td>$545.00</td>
    </tr>
    <tr>
      <td>#102</td>
      <td>J. Peterman</td>
      <td>$10,000.25</td>
    </tr>
  </tbody>
</table>
</Figure>

This makes it possible to dynamically toggle rows and columns without affecting the table layout.

Making elements visible

Use the visible utility to make an element visible:

<Figure> <Example> { <div className="grid grid-cols-3 gap-4 font-mono text-sm leading-6 font-bold text-white"> <div className="flex items-center justify-center rounded-lg bg-fuchsia-500 p-4">01</div> <div className="visible flex items-center justify-center rounded-lg bg-fuchsia-500 p-4">02</div> <div className="flex items-center justify-center rounded-lg bg-fuchsia-500 p-4">03</div> </div> } </Example>
html
<!-- [!code classes:visible] -->
<div class="grid grid-cols-3 gap-4">
  <div>01</div>
  <div class="visible ...">02</div>
  <div>03</div>
</div>
</Figure>

This is mostly useful for undoing the invisible utility at different screen sizes.

Responsive design

<ResponsiveDesign property="visibility" defaultClass="visible" featuredClass="invisible" />