JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container breakword">
<h1> this is the longestwordevergodhelpmewhycantthisjustworklongestwordevergodhelpmewhycantthisjustwork longes word ever.</h1>
</div>

CSS

.container { max-width: 100%;
margin: 0 20px;
display: table-cell;
text-align: center;
vertical-align: middle;
float: none; }

h1 { text-align: center;
font-weight: 800;
padding: 0px 20px;
color: #bec0ca;
font-size: 4.0rem;
line-height: 1.2;
letter-spacing: -.5rem;
font-weight: 800;
padding: 0px 40px;
max-width: 100%;
overflow-wrap: break-word;}

.breakword {

        /* These are technically the same, but use both */
        overflow-wrap: break-word;
        word-wrap: break-word;

        -ms-word-break: break-all;
        /* This is the dangerous one in WebKit, as it breaks things wherever */
        word-break: break-all;
        /* Instead use this non-standard one: */
        word-break: break-word;

        /* Adds a hyphen where the word breaks, if supported (No Blink) */
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;

    }