Display
Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.
Notation
Display utility classes that apply to all breakpoints, from xs to 2xl , have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0;and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
As such, the classes are named using the format:
.{value}forxs{breakpoint}:{value}forsm,md,lg,xl, and2xl,
Where value is one of:
noneinlineinline-blockblocktabletable-celltable-rowflexinline-flex-
grid -
inline-grid -
contentsetc.
The media queries effect screen widths with the given breakpoint or larger. For example,div(class="lg:hidden") sets display: none; on both lg, xl, and 2xl screens.
Example
<div class="inline bg-primary p-2 text-white">inline</div>
<div class="block bg-primary p-2 text-white mt-4">block</div>Hiding Elements
For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.
To hide elements simply use the.hidden class or one of the{sm,md,lg,xl,2xl}:hidden classes for any responsive screen variation.
To show an element only on a given interval of screen sizes you can combine one *:hidden class with a *:block class, for example hidden md:block xl:hidden will hide the element for all screen sizes except on medium and large devices.
| Screen Size | Class |
|---|---|
| Hidden on all | .hidden |
| Hidden only on xs | div(class="hidden sm:block") |
| Hidden only on sm | div(class="sm:hidden md:block") |
| Hidden only on md | div(class="md:hidden lg:block") |
| Hidden only on lg | div(class="lg:hidden xl:block") |
| Hidden only on xl | div(class="xl:hidden") |
| Visible on all | .block |
| Visible only on xs | div(class="block sm:hidden") |
| Visible only on sm | div(class="hidden sm:block md:hidden") |
| Visible only on md | div(class="hidden md:block lg:hidden") |
| Visible only on lg | div(class="hidden lg:block xl:hidden") |
| Visible only on xl | div(class="hidden xl:block") |
Display in Prints
Change the display value of elements when printing with tailwind print display utility classes. Includes support for the same display values as responsive utilities.
print:hiddenprint:inlineprint:inline-blockprint:blockprint:tableprint:table-rowprint:table-cellprint:flexprint:inline-flexetc.
The print and display utilities can be combined.
<div class="print:hidden">Screen Only (Hide on print only)</div>
<div class="hidden print:block">Print Only (Hide on screen only)</div>
<div class="hidden lg:block print:block">Hide up to large on screen, but always show on print</div>
