Clases de utilidad básicas¶

Una de las principales características de Tailwind son las clases de utilidad (utility classes) que proporciona. En frameworks como Bootstrap disponemos de clases semánticas que, al incorporarlas, muestran directamente un componente.

Las utility classes de Tailwind son de más bajo nivel, clases atómicas que aplican un estilo concreto, y no nos van a mostrar componentes enteros en pantalla, sino que van a definir un marco para que nosotros podamos personalizar la visualización de nuestros elementos combinando varias de ellas.

Por ejemplo: mientras que en Bootstrap definir un botón es tan simple como:

<button class="btn btn-primary">

En Tailwind debemos combinar las clases de utilidad que queramos para construir nosotros mismos el botón:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">

Analizaremos a continuación algunas de las clases más relevantes.

1. Elementos comunes¶

Como iremos viendo a continuación, la mayoría de estas clases de utilidad emplean algunos elementos comunes que ayudan a definir su tamaño o grado de aplicación.

1.1. Escala numérica¶

Muchas clases emplean una escala numérica (0, 1, 2, 4...) para definir distintos tamaños o grados de aplicación, que corresponden a múltiplos de 0.25rem (4px por defecto). Mediante el plugin de Tailwind CSS IntelliSense de VS Code puedes ver en cada clase que utilices el valor real que se le está aplicando.

Los saltos en los valores numéricos suelen ir de medio punto en medio punto desde el 0 al 12 (por ejemplo, 3, o 7.5), y con espacios más grandes hasta el 96 (12, 14, 16, 20, 24... a medida que aumenta la magnitud aumenta también el intervalo).

Por ejemplo, para indicar el tamaño de un margen en una caja podemos hacer:

<div class="m-4">...</div>

1.2. Unidades literales¶

Además, en algunos casos nos va a interesar especificar el tamaño en unidades literales: xs, sm, md, lg, xl... con valores hasta 9xl. También se tiene el término base para referirse al valor estándar, y algunos valores especiales más que se aplican en ciertos casos que veremos.

Por ejemplo, para especificar el tamaño de letra de un párrafo podemos hacer:

<p class="text-lg">...</p>

1.3. Colores¶

Tailwind tiene una gama de colores predefinidos que se pueden consultar aquí. Como se puede ver, cada color tiene un nombre y una tonalidad numérica, y especificaremos ambas cosas para aplicarlos.

Por ejemplo, para indicar un color de fondo para una caja usaremos algo como:

<div class="bg-blue-200">

Además, podemos definir la transparencia de un color añadiendo una barra / tras la tonalidad, y especificando el porcentaje de opacidad de 0 (totalmente transparente) a 100 (totalmente opaco):

<div class="bg-blue-200/50">

2. El modelo de cajas (box model)¶

Analizaremos a continuación algunas clases que tienen que ver con el modelo de cajas. Gracias a ellas definiremos aspectos como el tamaño (anchura y altura), márgenes, rellenos, bordes, etc.

2.1. Anchura y altura¶

Para especificar la anchura y altura de los componentes utilizamos los selectores w y h respectivamente. Para establecer el ancho o alto mínimo o máximo emplearemos min-w, min-h, max-w o max-h, del mismo modo.

Como modificadores podemos especificar los siguientes:

Un valor numérico (escala del 0 en adelante, con incrementos de 0.25 rem en cada unidad, como hemos explicado antes). Por ejemplo, w-16 equivaldría a 4 rem.
Una fracción del espacio disponible. Por ejemplo, w-1/4 sería una cuarta parte del espacio (25%)
Unidades literales, como por ejemplo w-xl, con tamaños ya preestablecidos
full: equivaldría al 100% de anchura
screen: equivaldría a 100vw, en unidades viewport
... otros (fit-content...)

Además, con la clase size podemos especificar a la vez la anchura y la altura. Esta clase no admite unidades literales, pero sí el resto. Por ejemplo, size-1/2.

Aquí vemos un ejemplo de aplicación:

<div class="w-4 h-1/2">...</div>

2.2. Márgenes y rellenos¶

De forma similar a como ocurre en Bootstrap, disponemos de los selectores m y p para definir los márgenes y rellenos (padding) de los componentes. Sobre este nombre base se le pueden añadir después una serie de modificadores para la posición:

t (top), b (bottom), l (left), r (right)
x (horizontal, izquierda y derecha)
y (vertical, arriba y abajo)

Además, podemos indicar un tamaño en la escala de 0 (nada) en adelante. Aquí vemos un ejemplo:

<div class="m-2 px-4">...</div>

2.3. Bordes y esquinas¶

Para definir bordes visibles debemos usar el selector border y especificar su grosor y su color. El grosor se especifica en unidades numéricas (0, 1, 2...) y el color usando la sintaxis de color vista antes. Además, disponemos de los modificadores t, b, l y r, similares a los de márgenes y padding, para aplicar el borde en algunos lados en concreto. Finalmente, también podemos indicar el estilo del borde con términos como solid, dotted, dashed o double. Aquí vemos un ejemplo:

<div class="border-t-2 border-blue-500 border-dotted">...</div>

En cuanto a las esquinas, disponemos del término rounded para indicar el grado de redondeo, desde 0 (cuadrado) en adelante, usando unidades literales para indicar mayor o menor grado. También podemos especificar en qué lados o esquinas aplicar el redondeo. Vemos algunos ejemplos:

rounded: las 4 esquinas con redondeo por defecto
rounded-t-xl: redondeo extra grande en esquinas superiores
rounded-br: redondeo en esquina inferior derecha
rounded-full: circular

Aquí se muestra un círculo azul con borde punteado (dotted):

<div class="size-16 border-4 border-blue-500 border-dotted rounded-full"></div>

2.4. Fondos¶

Para especificar el color de fondo de una caja emplearemos bg seguido del nombre del color. Por ejemplo:

<div class="bg-blue-200">

Además, podemos especificar imágenes de fondo indicando la URL, y el modo de repetición o posicionamiento de ese fondo. Algunas de las opciones disponibles más habituales son bg-cover, bg-repeat, bg-no-repeat o bg-center.

<div class="bg-[url(/fondo.png)] bg-cover"></div>

Finalmente, también se pueden aplicar gradientes con algunos selectores predefinidos. Este es un degradado lineal de izquierda a derecha entre cyan y azul:

<div class="h-14 bg-linear-to-r from-cyan-500 to-blue-500"></div>

Aquí se pueden consultar más opciones sobre imágenes de fondo y gradientes.

Ejercicio 1

Utiliza las clases de utilidad que hemos visto en este apartado para crear una tarjeta de visita en una página, que tenga un formato similar al de esta imagen. Deberá ocupar sólo una parte de la anchura, bordes redondeados y suficiente margen y padding para que el texto se muestre correctamente:

Ejercicio 2

Crea una página con Tailwind que muestre una barra de notificación horizontal a modo de alerta. Deberá ocupar todo el ancho disponible, con un degradado lineal de izquierda a derecha y borde grueso inferior:

3. Estilos para texto¶

Veremos ahora las clases de utilidad que se aplican para definir estilos de texto.

3.1. Tipos de letra¶

Mediante la clase base font podemos especificar distintos tipos de letra. Pueden ser fuentes prestablecidas (font-mono, font-sans...) o bien fuentes concretas entre corchetes:

<p class="font-[Arial]">...</p>

El grosor de la fuente también se especifica a través de font, con los sufijos desde thin (grosor 100) hasta black (grosor 900), pasando por otros intermedios como normal (400) o bold (700). Finalmente, para especificar algún tipo de cursiva usamos la clase italic o not-italic (texto normal).

Aquí vemos un ejemplo de todo esto:

<p class="font-sans font-bold italic">...</p>

3.2. Tamaño y alineación¶

Existen diferentes clases para indicar tamaños, alineaciones, colores, etc. Todas cuelgan de la clase base text:

Tamaño: usaremos text-{size}, siendo {size} el tamaño que queramos asignar como un literal. Por ejemplo, text-xl o text-base.
Alineación: tenemos text-{align}, siendo {align} un valor de left o start, right o end, center o justify.
Color: aplicaremos text-{color}, siendo {color} uno de los posibles colores definidos. Por ejemplo, text-blue-500.

Aquí podemos consultar otros estilos para tipografía y texto.

3.3. Otras decoraciones de textos¶

Otros selectores de clase permitirán añadir distintas decoraciones al texto:

Posición del subrayado a través de underline, overline, no-underline (quitar subrayado) o line-through
Color del subrayado con decoration-{color} (por ejemplo, decoration-blue-500)
Estilo del subrayado con decoration-{estilo} (por ejemplo, decoration-solid)
Grosor del subrayado con decoration-{número} (por ejemplo, decoration-2)
Separación del subrayado con el texto con decoration-offset-{número}

Ejercicio 3

Crea una página que contenga un artículo (HTML article) con un título y contenido reales, y con estos estilos aplicados con Tailwind:

4. Estilos para listas y tablas¶

4.1. Estilos para listas¶

A través de la clase list y algunas derivadas podemos modificar las propiedades de las listas. Veamos aquí algunas de las más habituales:

El tipo de viñeta (lo que en CSS sería list-style-type) se representa con list seguido del tipo de lista deseado: list-disc, list-decimal, list-none son habituales, y para otros más específicos podemos poner el nombre de la propiedad entre corchetes, como por ejemplo list-[upper-roman].
La posición de la viñeta se indica con list-inside y list-outside, básicamente
Para añadir imágenes específicas como viñetas, tenemos list-image, seguido de distintos modificadores como por ejemplo URLs (list-image-[url('/img/imagen.png')]) o incluso variables definidas, como veremos más adelante.

4.2. Estilos para tablas¶

Analizamos a continuación los principales selectores de Tailwind para diseño de tablas:

border-collapse y border-separate sirven para colapsar o dejar separados los bordes de la tabla y de las celdas interiores, respectivamente
table-auto y table-fixed determinan si el ancho de cada columna se ajusta a su contenido o es fijo
caption-top y caption-bottom permiten definir un caption o descripción breve de la tabla en la parte superior o inferior.
Además, podemos emplear otros selectores vistos antes, como border y sus derivados para definir los estilos de los bordes.

Aquí vemos un ejemplo:

<table class="border-collapse table-fixed">
  <caption class="caption-top text-sm text-blue-200">
    Notas de alumnos
  </caption>
  <thead>
    <tr class="bg-gray-50">
      <th class="border border-gray-200 p-1">Alumno</th>
      <th class="border border-gray-200 p-1">Nota</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-gray-200 p-1">Juan Pérez</td>
      <td class="border border-gray-200 p-1">9.75</td>
    </tr>
    <tr>
      <td class="border border-gray-200 p-1">Ana Gómez</td>
      <td class="border border-gray-200 p-1">7.80</td>
    </tr>
  </tbody>
</table>

Ejercicio 4

Crea una página en Tailwind que defina una lista de pasos a seguir con estos estilos:

Ejercicio 5

Para combinar varias de las cosas que hemos visto en este documento, prueba ahora a crear una página con Tailwind que tenga este aspecto final: