Tailwind CSS v1.0 is here! Learn more →

Whitespace & Wrapping

Utilities for controlling the whitespace and wrapping of an element.

Work in progress!

More detailed documentation is coming soon, but in the meantime here's a quick class reference.

Class reference

Class Properties
.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;
.break-words word-wrap: break-word;
.break-normal word-wrap: normal;
.truncate overflow: hidden; text-overflow: ellipsis; white-space: nowrap

Customizing

Responsive and State Variants

By default, only responsive variants are generated for whitespace & wrapping utilities.

You can control which variants are generated for the whitespace & wrapping utilities by modifying the whitespace property in the modules section of your Tailwind config file.

For example, this config will also generate hover and focus variants:

{
// ...
modules: {
    // ...
-   whitespace: ['responsive'],
+   whitespace: ['responsive', 'hover', 'focus', 'active', 'group-hover'],
}
}

Disabling

If you don't plan to use the whitespace & wrapping utilities in your project, you can disable them entirely by setting the whitespace property to false in the modules section of your config file:

{
// ...
modules: {
    // ...
-   whitespace: ['responsive'],
+   whitespace: false,
}
}