JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <a>
            Something
        </a>
    </li>
    <li>
        <a>
            Something else
        </a>
    </li>
    <li>
        <a>
            Something else 2
        </a>
    </li>
</ul>
<p>Why the A has not the same compiled height as its parent? (like a border-bottom: solid 1px red)</p>

CSS

body {
    font-size:22px;
}
ul, li, a {
    margin:0;
    padding:0;
}
li {
    display:inline-block;
    background-color:red;
    line-height: 0;
}
li > a {
    background-color:yellow;
    line-height: 0;
}
ul {
    background-color:blue;
}