JSFiddle - React, Tailwind, and code Playground

HTML

<p id='id' class='class' style='color: blue; !important'> <span>Lorem ipsum dolor sit amet,</span> consectetur adipiscing elit. Aenean ac lorem urna. Praesent iaculis sapien in lorem molestie facilisis. Integer accumsan dolor a nisi viverra dapibus. Vestibulum at mi hendrerit lorem fermentum tincidunt tempor a nulla. Vestibulum ut ipsum eu ipsum accumsan faucibus sed ac ipsum. Mauris congue fermentum adipiscing. Donec laoreet viverra ipsum, in tempor dolor fringilla tincidunt. Praesent mattis, risus sed iaculis interdum, elit est pellentesque turpis, eget malesuada dolor massa vel elit. Quisque a neque odio, et rhoncus quam. Sed eu elit dui, quis malesuada nulla. Maecenas varius augue id tortor gravida quis pulvinar arcu fermentum. Ut pharetra est sed est vehicula non pellentesque magna semper. Aenean suscipit dui pretium ante egestas adipiscing. Nullam sed enim ac odio tempor iaculis. Fusce at rhoncus orci.</p>

CSS

p:first-line {
    color: red;
}

/* Simple selector vs :first-line -> :first-line wins */
p {
    color: blue;
}

/* Class vs :first-line -> :first-line wins */
.class {
    color: blue;
}

/* ID vs :first-line -> :first-line wins */
#id {
    color: blue;
}

/* Inline-style vs :first-line -> :first-line wins */

/* !important vs :first-line -> :first-line wins */
p {
    color: blue !important;
}

/* ALL IN ONE -> :first-line wins */

p#id.class {
    color: blue !important;
}

/*
 * According to the spec http://www.w3.org/TR/CSS2/selector.html#first-line-pseudo
 * only another element wrapping the content of the first line is more specific 
 * than the first-line pseudo-element. 
 */
p span {
    color:green;
}