JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="primary-nav" class="primary-nav flex--sm flex--stretch collapse">
<li class="menu-item--42"><a href="/">Lorem ipsum</a></li>
<li class="menu-item--48"><a href="/">I wrap on to two lines</a></li>
<li class="menu-item--49"><a href="/">Lorem ipsum</a></li>
<li class="menu-item--50"><a href="/">In pulvinar ligula ac congue viverra</a></li>
<li class="menu-item--51"><a href="/">Vivamus nec massa</a></li>
</ul>

SCSS

.primary-nav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

li {
    background-color: black;
    &:nth-child(2n) {
        background-color: teal;
    }
}

a {
    display: block;
    color: white;
}