JSFiddle - React, Tailwind, and code Playground

HTML

<br/><br/>Block where first div has the class<br/><br/>

<div class="teaser-box">Div</div>
<div class="teaser-box">Div</div>
<div class="teaser-box">Div</div>
<div class="teaser-box">Div</div>

<br/><br/>Block where first element does not have the class<br/><br/>

<p>Paragraph</p>
<p>Paragraph</p>
<p class="teaser-box">Paragraph</p>
<p class="teaser-box">Paragraph</p>

<br/><br/>The result is: This rule edits the first element of a group IF this element has a certain class.

CSS

div.teaser-box { background-color:green; }
div.teaser-box:first-of-type { background-color:red; }


.teaser-box { background-color:blue; }
.teaser-box:first-of-type { background-color:red; }