Display

Display utilities for controlling the display property of elements.

Basic Display Values

Control the display type of an element.

CSS

.block          /* display: block */
.inline-block   /* display: inline-block */
.inline         /* display: inline */
.hidden         /* display: none */

Flex and Grid

Display utilities for flexbox and grid layouts.

CSS

.flex           /* display: flex */
.inline-flex    /* display: inline-flex */
.grid           /* display: grid */
.inline-grid    /* display: inline-grid */

Table Display

Display utilities for table-related elements.

CSS

.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 */

Other Display Values

Additional display utilities for special use cases.

CSS

.flow-root     /* display: flow-root - creates block formatting context */
.contents       /* display: contents - element doesn't generate box */
.list-item      /* display: list-item */

Responsive Display

Apply display utilities at specific breakpoints.

CSS

/* 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

Common Patterns

Hide on Mobile

HTML

<div class="hidden md:block">
  This content is hidden on mobile, visible on medium screens and up
</div>

Hide on Desktop

HTML

<div class="md:hidden">
  This content is only visible on mobile
</div>

Inline Form

HTML

<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>

Responsive Grid

HTML

<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>