JSFiddle - React, Tailwind, and code Playground

HTML

<main>
<p class="n">
Ein Text
</p>
<p class="l">
linksbündig
</p>
<p class="z">
zentriert
</p>
<p class="r">
rechtsbündig
</p>
<div class="dz">
div-zentr.
</div>
</main>

CSS

main {
  display: grid;
  grid-template-columns: 5em 7em 7em 8em 7em 7em;
  border: gray solid 1px;
      
 }
.n {
 
  border: 2px solid black;
   }
.z {
  justify-items: center;  /* unwirksam */
  
       text-align: center;
  
  border: 2px solid red;
   }
.r {
  justify-items: flex-end;
  border: 2px dotted blue;
  }
.l {
  justify-items: flex-start;
  border: 3px dashed pink;
  }
 div.dz {
  text-align: center;
  border: 2px solid green;
 }