Typography

Whitespace

Utilities for sets the whitespace of an element.


Class

classcss
whitespace-normalwhite-space: normal
whitespace-no-wrapwhite-space: nowrap
whitespace-prewhite-space: pre
whitespace-pre-linewhite-space: pre-line
whitespace-pre-wrapwhite-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.

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

VariantEnabledResponsive
DefaultYesYes
Dark Theme
hover
group-hover
focus
focus-visible
focus-within
active
visited
checked
disabled