Vamos a comenzar una serie de artículos dedicados a la creación de interfaces típicas de sitios web utilizando el framework CSS Tailwind, que seguro que ya conocéis. Este primer artículo vamos a dedicarlo al trabajo con listas de elementos.

Por si alguien no conoce Tailwind CSS, es un framework basado en clases de utilidad que hemos podido aprender a manejar en el Manual de Tailwind CSS.

Listas de Elementos y Tailwind CSS

El framework CSS Tailwind viene con un reseteo de los estilos CSS, de modo que cuando utilizamos las listas de elementos, me refiero a etiquetas <ul> principalmente, estas aparecen totalmente carentes de formato. Como sabes las listas son muy recurridas en el día a día del diseño web y tener esos pequeños puntitos (bullets) al lado de cada uno de los elementos resulta bastante práctico, visualmente hablando.

Por supuesto además de los famosos bullets de las listas, a veces también nos gustaría tener iconos u otro tipo de elementos que señalen cada uno de los ítems de la lista. Esto no podremos conseguirlo directamente con HTML y CSS, pero nos podremos apoyar en elementos adicionales como imágenes SVG.

A lo largo de este artículo vamos a ver varios ejemplos de listas con diferentes estilos que ilustran casos típicos de trabajo con listas para darles un formato adecuado y diverso.

Listas con bullets HTML

Vamos a comenzar por lo más típico y sencillo, que sería construir una lista con bullets de los que conseguimos con el propio HTML, siendo que cada elemento aparecerá en una línea diferente que es lo típico de las listas.

<ul class="list-disc pl-5">
  <li class="mb-2">Elemento 1</li>
  <li class="mb-2">Elemento 2</li>
  <li class="mb-2">Elemento 3</li>
</ul>

En este ejemplo conseguimos los bullets con la clase list-disc. Estos son los bullets "nativos" de HTML, los que se presentan como predeterminados.

Parece que es un ejemplo tonto, pero es que en Tailwind CSS, por el reseteo del CSS, no aparecen los bullets de manera predeterminada.

Además con la clase pl-5 en la etiqueta <ul> conseguimos un poco de padding a la izquierda para que los bullets no estén pegados al borde. Adicionalmente tenemos la clase mb-2 en cada elemento <li>, que permite que exista un pequeño margen en la parte inferior para separar los elementos de la lista.

Cambiar el estilo de los bullets

Existen otros tipos de estilos de bullets en HTML pero no tenemos clases de utilidad para ellos, por lo que es necesario usar clases arbitrarias de Tailwind CSS.

Por ejemplo si queremos que los Bullets aparezcan como círculos sin relleno podremos utilizar este código de aquí:

<ul class="list-[circle] pl-5">

Lista inline con Tailwind CSS

A veces es muy útil conseguir listas en línea, es decir donde cada uno de los elementos está en la misma línea. Para esto cada uno de los <li> debería ser inline-block.

Para que este estilo quede bien podemos ponerle algún estilo representativo a los elementos, por ejemplo encajarlos dentro de su propia caja y que quede patente su individualidad.

<ul class="my-4">
    <li class="inline-block bg-orange-200 rounded-full px-4 py-1 mr-2">CSS</li>
    <li class="inline-block bg-orange-200 rounded-full px-4 py-1 mr-2">HTML</li>
    <li class="inline-block bg-orange-200 rounded-full px-4 py-1 mr-2">Javascript</li>
</ul>

En esta lista hemos colocado varios estilos para sus elementos y hemos dejado la propia lista UL con un simple margen arriba y abajo. Los estilos de los elementos LI utilizados son los siguientes:

• bg-orange-200: Aplica un fondo plano, de color naranja claro a cada elemento de la lista.
• rounded-full: Lo ponemos para tener unos bordes totalmente redondeados, dando un efecto de cápsula.
• px-4 y py-1: Añade espacio de relleno horizontal (px-4) y vertical (py-1) para que los elementos respiren alrededor de la caja.
• mr-2: Agrega un margen a la derecha de cada elemento para separarlos un pocoo entre sí.

Lista de elementos vertical con borde de separación entre ellos

Ahora vamos a hacer una lista que podríamos utilizar perfectamente como barra de navegación horizontal. Sería una lista donde los elementos aparecerán uno abajo del otro, donde los elementos tendrán un separador entre ellos.

<ul class="text-center">
    <li class="font-bold uppercase border-b-2 border-gray-300 pb-2 mb-2">Productos</li>
    <li class="font-bold uppercase border-b-2 border-gray-300 pb-2 mb-2">Quienes somos</li>
    <li class="font-bold uppercase pb-2 mb-2">Contacto</li>
</ul>

En este caso hemos hecho una lista con el contenido centrado, donde tenemos un mismo estilo para todos los elementos, menos para el último, que le hemos quitado el borde inferior, pues no quedan otros elementos con los que separarse.

Los estilos determinados que hemos utilizado en este ejemplo son:

• font-bold: Pone negrita al texto.
• uppercase: Transforma el texto para que aparezca todo en mayúsculas.
• border-b-2 y border-gray-300: Dos clases de utilidad necesarias para añadir un borde en la parte inferior de cada elemento con un grosor de 2 píxeles y un color gris claro.
• pb-2: Añade un relleno en la parte inferior dentro de cada elemento para separar el texto del borde del elemento.
• mb-2: Añade un margen en la parte inferior de cada elemento para separar los elementos entre sí.

Elementos de lista con el bullet personalizado mediante SVG

En el último ejemplo vamos a mostrar cómo podríamos eliminar los bullets de las listas y sustituirlos por imágenes personalizadas. Con esto conseguiremos efecto diferente en las listas que no podríamos obtener solo con el HTML nativo.

Las imágenes personalizadas las vamos a conseguir por medio de archivos SVG, ya que este tipo de formato es ideal para el uso que vamos a realizar. Nos ayudará a crear listas de todos los tamaños con un único archivo, que se podrá adaptar perfectamente y sacar lo mejor de cada dimensión o pantalla de dispositivo sin perder la calidad.

<ul class="list-none pl-0">
    <li class="flex items-center mb-2">
        <img src="arrow.svg" alt="Flecha" class="w-4 h-4 mr-2">
        Discos duros
    </li>
    <li class="flex items-center mb-2">
        <img src="arrow.svg" alt="Flecha" class="w-4 h-4 mr-2">
        Procesadores
    </li>
    <li class="flex items-center mb-2">
        <img src="arrow.svg" alt="Flecha" class="w-4 h-4 mr-2">
        Monitores
    </li>
</ul>

En este caso hemos usado una lista UL sin bullets predeterminados, para ello usamos la clase de utilidad list-none. Además hemos usado pl-0 para eliminar el padding a la izquierda para que la lista comience desde el borde, aunque esto no sería estrictamente necesario puesto que son los estilos que fija de manera predeterminada el reset.

Además para los elementos de la lista hemos aplicado los siguientes estilos con clases de utilidad:

• Cada <li> tiene una clase flex para alinear horizontalmente la imagen y el texto.
• La clase items-center nos asegura que la imagen y el texto estén alineados verticalmente en el centro.
• mb-2 ya sabemos que hace: un poco de espacio debajo de cada elemento.

Por último tenemos la imagen SVG como bullet, que también tiene algunos estilos:

• w-4 y h-4: establece el tamaño de la imagen SVG. Puedes ajustar esto según tu diseño. Gracias a que es un SVG la imagen nunca perderá calidad.
• mr-2: aplica un margen a la derecha de la imagen para separarla del texto que la acompaña.