Today I Learned

hashrocket A Hashrocket project

Break words in Tailwind.

In Tailwind you can use certain classes to wrap text within an element.
You could use something like text-wrap or whitespace-pre-wrap, or any of the other classes.

However, if a single word is too long it will continue on past the element it is contained in.

Kind of like this:

<div class="text-wrap">
<!-- really long text -->
</div>

HEREisAreallyLONGwordHEREisAreallyLONGwordHEREisAreallyLONGwordHEREisAreallyLONGwordHEREisAreallyLONGwordHEREisAreallyLONGwordHEREisAreallyLONGwordHEREisAreallyLONGwordHEREisAreallyLONGword

Well, just add the Tailwind class break-words and it will break up a word when it reaches the end of the element, and you'll get something more like this:

<div class="text-wrap break-words">
<!-- really long text -->
</div>

HEREisAreallyLONGwordHEREisAreallyLONGwordHEREisAreallyLONGwordHEREisAreallyLONGwordHEREisAreallyLONGword HEREisAreallyLONGwordHEREisAreallyLONGwordHEREisAreallyLONGwordHEREisAreallyLONGword

See More #html-css TILs