Loading...
Display utilities for controlling the display property of elements.
Control the display type of an element.
.block /* display: block */
.inline-block /* display: inline-block */
.inline /* display: inline */
.hidden /* display: none */Display utilities for flexbox and grid layouts.
.flex /* display: flex */
.inline-flex /* display: inline-flex */
.grid /* display: grid */
.inline-grid /* display: inline-grid */Display utilities for table-related elements.
.table /* display: table */
.inline-table /* display: inline-table */
.table-caption /* display: table-caption */
.table-cell /* display: table-cell */
.table-column /* display: table-column */
.table-column-group /* display: table-column-group */
.table-footer-group /* display: table-footer-group */
.table-header-group /* display: table-header-group */
.table-row-group /* display: table-row-group */
.table-row /* display: table-row */Additional display utilities for special use cases.
.flow-root /* display: flow-root - creates block formatting context */
.contents /* display: contents - element doesn't generate box */
.list-item /* display: list-item */Apply display utilities at specific breakpoints.
/* Small screens and up */
.sm:block .sm:inline-block .sm:inline .sm:flex .sm:inline-flex .sm:grid .sm:inline-grid .sm:hidden
/* Medium screens and up */
.md:block .md:inline-block .md:inline .md:flex .md:inline-flex .md:grid .md:inline-grid .md:hidden
/* Large screens and up */
.lg:block .lg:inline-block .lg:inline .lg:flex .lg:inline-flex .lg:grid .lg:inline-grid .lg:hidden
/* Extra large screens and up */
.xl:block .xl:inline-block .xl:inline .xl:flex .xl:inline-flex .xl:grid .xl:inline-grid .xl:hidden<div class="hidden md:block">
This content is hidden on mobile, visible on medium screens and up
</div><div class="md:hidden">
This content is only visible on mobile
</div><form class="inline-flex items-center gap-2">
<input type="email" placeholder="Enter email" class="px-3 py-2 border rounded">
<button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded">Subscribe</button>
</form><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>