Typography

Whitespace

Utilities for sets the whitespace of an element.

Class

class	css
whitespace-normal	white-space: normal
whitespace-no-wrap	white-space: nowrap
whitespace-pre	white-space: pre
whitespace-pre-line	white-space: pre-line
whitespace-pre-wrap	white-space: pre-wrap

Usage

Set text paragraph whitespace to normal.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure, eum natus enim maxime laudantium quibusdam illo nihil, reprehenderit saepe quam aliquid odio accusamus.

<!-- Example -->
<y class="whitespace-normal ...">
  ...
</y>

Set scrollable text paragraph whitespace to no-wrap.

<!-- Example -->
<y class="whitespace-no-wrap ... overflow-x-scroll">
  ...
</y>

Set text paragraph preserved new line whitespaces.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  Omnis quidem itaque beatae,
  rem tenetur quia iure,

reprehenderit saepe quam aliquid odio accusamus.

<!-- Example -->
<y class="whitespace-pre ...">
  ...
</y>

Set text paragraph without preserved new line whitespaces.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,

reprehenderit saepe quam aliquid odio accusamus.

<!-- Example -->
<y class="whitespace-pre-line ...">
  ...
</y>

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.