JSFiddle - React, Tailwind, and code Playground

HTML

<div>
      <div>This text should appear as normal</div>
      <p>This text should be blue.</p>
      <p class="myclass1">This text should appear red.</p>
      <p class="myclass2">This text should appear green.</p>
    </div>

CSS

p:first-of-type {color:blue}
    p.myclass1:first-of-type {color:red}
    .myclass2:first-of-type {color:green}