Before flexbox and grid, every layout depends on a few fundamentals: how an element is displayed, what happens when content is bigger than its box, whether it is hidden or merely invisible, and where long text is cut off. After this lesson you will be able to toggle elements per breakpoint, build scrollable regions, and clamp text to a fixed number of lines.
The display property is exposed as a set of single-word classes:
| Class | CSS | Use it for |
|---|---|---|
| block | display: block | Images and links that should fill a row |
| inline-block | display: inline-block | Badges, inline buttons with padding |
| inline | display: inline | Text spans |
| flex / inline-flex | display: flex | One-dimensional layouts |
| grid / inline-grid | display: grid | Two-dimensional layouts |
| hidden | display: none | Removing an element entirely |
| contents | display: contents | Making a wrapper disappear from layout |
These combine with breakpoints; the classic mobile navigation toggle is just two of them:
<nav class="hidden md:flex md:gap-6">...</nav>
<button class="md:hidden">Menu</button>Preflight makes images display: block by default, which removes the mysterious gap under inline images.
When content is larger than its container you decide whether it spills, clips or scrolls:
<div class="h-64 overflow-y-auto">Scrolls vertically only when needed</div>
<div class="overflow-x-auto"><table class="min-w-full">...</table></div>
<div class="overflow-hidden rounded-xl"><img src="..." /></div>
<pre class="overflow-x-scroll">Always shows a horizontal scrollbar</pre>overflow-auto shows scrollbars only when necessary and is almost always the right choice; overflow-scroll forces them. overflow-hidden clips content, including rounded corners on images, which is why cards use it. overflow-clip clips without creating a scroll container, so it does not break position: sticky in descendants. Add overscroll-contain to scroll regions inside modals so the page behind does not scroll when the list reaches its end.
Three utilities hide content, and they are not interchangeable:
<p class="hidden">Removed from layout and from screen readers</p>
<p class="invisible">Keeps its space, not visible, not announced</p>
<p class="sr-only">Visually hidden, still announced by screen readers</p>Use invisible to reserve space for something that appears later (a validation message, a tooltip) so the layout does not jump. Use sr-only for labels sighted users do not need, such as the text inside an icon-only button; not-sr-only reverses it at a breakpoint. collapse hides table rows and columns without affecting the table's layout.
Long text is the most common cause of broken cards. Tailwind has utilities for the three sensible strategies:
<h3 class="truncate">One line, ellipsis at the end</h3>
<p class="line-clamp-2">At most two lines, then an ellipsis</p>
<p class="break-words">Long URLs wrap instead of overflowing</p>
<p class="whitespace-nowrap">Never wraps; useful for table cells</p>truncate is shorthand for overflow-hidden text-ellipsis whitespace-nowrap, so it only works on block or flex-child elements with a constrained width — inside a flex row add min-w-0 to the child. line-clamp-<n> works on multi-line text and line-clamp-none removes it at larger breakpoints. text-balance and text-pretty improve headline and paragraph wrapping without changing the length of the text.
hidden to hide an icon-button label; that also hides it from assistive technology. Use sr-only.overflow-hidden on an ancestor of a sticky header, which silently disables the sticky behaviour.truncate to an inline <span>; it needs a block-level box with a width.overflow-hidden instead of overflow-x-auto, which hides columns on small screens.Which class hides an element visually but keeps it available to screen readers?
block, flex, grid, hidden, contents) combine with breakpoints to show and hide layout per screen size.overflow-auto for scroll regions and overflow-hidden for clipping rounded media; remember it breaks sticky descendants.hidden, invisible and sr-only differ in layout space and screen-reader exposure.truncate handles one line, line-clamp-<n> handles several; both need a constrained width.break-words, whitespace-nowrap and text-balance control wrapping behaviour.Next lesson: Flexbox with Tailwind — align and distribute items in one dimension with flex, justify-* and items-*.