display

Utilities for controlling the display box type of an element.

Examples

Block and Inline

Use the inline, inline-block and block utilities to control the flow of text and elements:

<p>
  When controlling the flow of text, using the CSS property <span class="inline">display: inline</span>
  will cause the text inside the element to wrap normally.
</p>

Flex

Use the flex utility to create a block-level flex container:

<div class="flex items-center">
  <img src="path/to/image.jpg" />
  <div>
    <strong>Andrew Alfred</strong>
    <span>Technical advisor</span>
  </div>
</div>

Hidden

Use the hidden utility to remove an element from the document:

<div class="flex ...">
  <div class="hidden ...">01</div>
  <div>02</div>
  <div>03</div>
</div>

Customizing your theme

Use theme variables to customise the values these utilities generate:

@theme {
  --text-tiny: 0.625rem;
}