Primero comentar que cuando tienes patrones de estilos que se repiten puedes hacer tus reglas CSS con el @apply. Pero si quieres usar clases de utilidad en el propio código HTML sin tener que editar el CSS también se puede.
Bueno, hay algunos estilos que puedes subir para el <ul> sin problema alguno.
En tu código solo el uppercase, pero también podría ser el color del texto o el tamaño, si los tuviertas:
<ul class="uppercase">
<li class="inline-block mr-2 border-b-2 px-2 border-blue-500">CSS</li>
<li class="inline-block mr-2 border-b-2 px-2 border-blue-500">Framework</li>
<li class="inline-block mr-2 border-b-2 px-2 border-blue-500">Tailwind</li>
</ul>
Y ahora, para el resto de estilos que no pueden heredar directamente los <li> y tienes que asignarlos a cada elemento de manera individual lo puedes organizar desde el <ul> con el modificador [&>li]:, con un código como este:
<ul class="uppercase [&>li]:inline-block [&>li]:mr-2 [&>li]:border-b-2 [&>li]:px-2 [&>li]:border-blue-500">
<li>CSS</li>
<li>Framework</li>
<li>Tailwind</li>
</ul>
En Tailwind CSS, el selector & se utiliza para hacer referencia al elemento actual, en este caso el <lu>, pero lo tenemos en combiación con > li, lo que se traduciría en "aplicar el estilo a los elementos li que son hijos directos del elemento actual". Así aplicas estilos a todos los <li> sin tener que modificarlos uno a uno.
Finalmente, la sintaxis [&>li]:inline-block permite decir qué estilo quieres aplicar a ese selector, para que se tenga en cuenta sobre todos los elementos li que son hijos directos del elemento al que se le aplica esta clase de utilidad.
Otra alternativa válida, que seriviría si quisieras que el estilo se aplique a todos los elementos que sean hijos directos sería hacer uso de * en vez de li. Puedes utilizar un enfoque similar a este:
<div class="[&>*]:bg-gray-300">
<p>x</p>
<article>o</article>
</div>
Espero haberte ayudado con esto.