Las clases utilitarias en Tailwind CSS son clases pequeñas y de un solo propósito que se pueden aplicar directamente a los elementos HTML para estilizarlos. Cada clase utilitaria corresponde a una propiedad y valor específico de CSS, lo que permite crear diseños personalizados rápidamente sin necesidad de escribir CSS personalizado.

Características clave

• Cada clase utilitaria realiza una sola función, como establecer un margen, relleno, color o tamaño de fuente;
• Es posible combinar varias clases utilitarias para lograr estilos complejos;
• El uso de clases utilitarias predefinidas garantiza una apariencia coherente en todo el proyecto;
• Tailwind ofrece variantes responsivas de las clases utilitarias para gestionar fácilmente diferentes tamaños de pantalla.

Ejemplo

Explicación

1. p-4 agrega un relleno de 1rem (16px) en todos los lados;
2. bg-blue-500 establece el color de fondo a un tono específico de azul;
3. text-white establece el color del texto en blanco;
4. text-xl define el tamaño de fuente a un tamaño mayor;
5. font-bold aplica negrita al texto;
6. mt-2 agrega un margen superior de 0.5rem (8px).

En los siguientes capítulos, estudiaremos cada clase en profundidad. No es necesario memorizar todas las clases que se muestran aquí.