Para utilizar las clases utilitarias en Tailwind CSS, agréguelas al atributo class de sus elementos HTML. Cada clase corresponde a una regla CSS específica, lo que facilita la comprensión y gestión de los estilos directamente en el HTML.

Estructura HTML

Comenzar con una estructura HTML básica.

Aplicación de clases utilitarias

Agregar clases utilitarias al atributo class de los elementos para definir su estilo.

Explicación

1. p-4: Añade relleno;
2. bg-gray-100: Establece el color de fondo a gris claro;
3. rounded-lg: Aplica esquinas redondeadas grandes;
4. shadow-md: Aplica una sombra de tamaño medio.

1. h-16: Establece la altura;
2. w-16: Establece el ancho;
3. rounded-full: Convierte la imagen en circular;
4. mx-auto: Centra la imagen horizontalmente.

1. text-center: Centra el texto;
2. mt-4: Agrega un margen superior;
3. text-lg: Establece el tamaño de fuente;
4. font-semibold: Aplica negrita semipesada al texto;
5. text-gray-500: Establece el color del texto a gris.

1. mt-4: Agrega un margen superior;
2. px-4: Agrega relleno horizontal;
3. py-2: Agrega relleno vertical;
4. bg-blue-500: Establece el color de fondo a azul;
5. text-white: Establece el color del texto a blanco;
6. rounded: Agrega esquinas ligeramente redondeadas;
7. hover:bg-blue-700: Cambia el color de fondo al pasar el cursor.