Tailwind CSS Classes

Tailwind CSS class .whitespace-normal / .whitespace-*

<div class="whitespace-normal bg-gray-300 my-2 overflow-x-auto">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.</div>

<div class="whitespace-no-wrap bg-gray-300 my-2 overflow-x-auto">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.</div>

<div class="whitespace-pre bg-gray-300 my-2 overflow-x-auto">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.</div>

<div class="whitespace-pre-line bg-gray-300 my-2 overflow-x-auto">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.</div>

<div class="whitespace-pre-wrap bg-gray-300 my-2 overflow-x-auto">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.</div>

Preview

Are you tired of writing HTML by hand?

CSS source

.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; }

More Tailwind CSS classes in Text category

© 2024 Shuffle. All rights reserved.