> Faqs > Cómo aplicar estilos a todos los item de la lista en el elemento <ul> con Tailwind CSS

Cómo aplicar estilos a todos los item de la lista en el elemento <ul> con Tailwind CSS

Tengo una lista a la que voy a aplicar estilos con clases de utilidad de Tailwind.

En principio me interesa aplicar estilos a todos los elementos de la lista <li> para que puedan:

  • Estar en línea
  • Tener un borde
  • Tener uppercase
  • y otros...

El tema es que me sale un código como este:

<ul>
  <li class="inline-block mr-2 border-b-2 px-2 border-blue-500 uppercase">CSS</li>
  <li class="inline-block mr-2 border-b-2 px-2 border-blue-500 uppercase">Framework</li>
  <li class="inline-block mr-2 border-b-2 px-2 border-blue-500 uppercase">Tailwind</li>
</ul>

¿No existe alguna manera de poner el estilo en el UL para que pueda evitar repetir todo el rato los estilos en el LI?

Respuestas

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.

Norberto
196 3 18 14