invisible utility CSS output
The invisible utility class produces the CSS rule visibility: hidden;
Tailwind CSS · Utilities reference · all subjects
visibility
9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
collapse utility CSS output
The collapse utility class produces the CSS rule visibility: collapse;
invisible maintains layout space
The invisible utility hides an element but maintains its place in the document, affecting the layout of other elements.
collapse for tables hides without affecting layout
The collapse utility hides 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. This makes it possible to dynamically toggle rows and columns without affecting the table layout.
visible utility use case
The visible utility is mostly useful for undoing the invisible utility at different screen sizes.
invisible example with grid
Example showing invisible utility: the middle box in a three-column grid is hidden with the invisible class but still takes up space in the layout.
collapse example with table row
Example showing collapse utility: a table row with the collapse class is hidden but does not affect the table layout, allowing other rows to maintain their positions.
visible example with grid
Example showing visible utility: all boxes in a three-column grid are visible when the visible class is applied.
visibility utilities support responsive design
Visibility utilities support responsive design variants, allowing you to apply visibility changes at different screen sizes. The default class is visible and can be overridden with invisible at specific breakpoints.