JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
    <li>qux</li>
</ul>

CSS

ul {
    list-style-type: none;
}

li {
    display: inline;
}

li::after {
    content: ', ';
    display: inline;
}

li:nth-last-child(2)::after {
    content: ', and ';
}

li:last-child::after {
    display: none;
}