En este módulo, exploraremos cómo crear componentes comunes de interfaz de usuario (UI) utilizando Tailwind CSS, como botones, formularios, tablas, listas, tarjetas, modales, alertas, notificaciones y cómo implementar tipografías personalizadas. Estos componentes son esenciales en cualquier sitio web o aplicación moderna, y con Tailwind CSS podemos diseñarlos rápida y fácilmente.

Botones personalizados

Tailwind permite crear botones personalizables con diferentes colores, tamaños y efectos. Los botones se construyen utilizando una combinación de clases para colores de fondo, relleno, borde, texto y más.

Botón primario básico:

1<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
2  Botón Primario
3</button>

bg-blue-500: Fondo azul.
hover:bg-blue-700: Cambia el color del fondo al pasar el ratón.
text-white: Texto blanco.
py-2 px-4: Añade padding vertical y horizontal.
rounded: Bordes redondeados.

Botón secundario:

1<button class="bg-gray-200 hover:bg-gray-400 text-black font-bold py-2 px-4 rounded">
2  Botón Secundario
3</button>

Referencia: Botones en Tailwind

Formularios estilizados

Los formularios son elementos clave en la mayoría de los sitios web. Tailwind te permite diseñar formularios completamente personalizados utilizando sus clases utilitarias.

Formulario básico:

1<form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
2  <div class="mb-4">
3    <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
4      Nombre de usuario
5    </label>
6    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Ingresa tu nombre de usuario">
7  </div>
8  <div class="mb-6">
9    <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
10      Contraseña
11    </label>
12    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="********">
13  </div>
14  <div class="flex items-center justify-between">
15    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
16      Iniciar sesión
17    </button>
18  </div>
19</form>

focus:outline-none: Elimina el borde predeterminado al enfocar el campo.
focus:shadow-outline: Añade una sombra alrededor del campo enfocado.

Referencia: Estilos para formularios en Tailwind

Tablas y listas

Tailwind proporciona clases para crear tablas y listas personalizadas fácilmente, permitiendo una mejor legibilidad y organización.

Tabla básica:

1<table class="min-w-full bg-white">
2  <thead class="bg-gray-800 text-white">
3    <tr>
4      <th class="w-1/3 text-left py-3 px-4 uppercase font-semibold text-sm">Nombre</th>
5      <th class="w-1/3 text-left py-3 px-4 uppercase font-semibold text-sm">Apellido</th>
6      <th class="text-left py-3 px-4 uppercase font-semibold text-sm">Correo Electrónico</th>
7    </tr>
8  </thead>
9  <tbody class="text-gray-700">
10    <tr>
11      <td class="w-1/3 text-left py-3 px-4">Juan</td>
12      <td class="w-1/3 text-left py-3 px-4">Pérez</td>
13      <td class="text-left py-3 px-4">juan@example.com</td>
14    </tr>
15    <tr>
16      <td class="w-1/3 text-left py-3 px-4">Ana</td>
17      <td class="w-1/3 text-left py-3 px-4">García</td>
18      <td class="text-left py-3 px-4">ana@example.com</td>
19    </tr>
20  </tbody>
21</table>

Lista básica:

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

list-disc: Añade puntos a cada elemento de la lista.
pl-5: Padding a la izquierda para la lista.
space-y-2: Espacio vertical entre los elementos.

Referencia: Tablas en Tailwind

Tarjetas y Modales

Tarjeta básica:

Las tarjetas son un componente común para mostrar información en bloques atractivos y organizados.

1<div class="max-w-sm rounded overflow-hidden shadow-lg">
2  <img class="object-cover w-full h-40" src="https://picsum.photos/seed/picsum/200/200" alt="Imagen">
3  <div class="px-6 py-4">
4    <div class="font-bold text-xl mb-2">Título de la Tarjeta</div>
5    <p class="text-gray-700 text-base">
6      Este es el contenido de la tarjeta.
7    </p>
8  </div>
9  <div class="px-6 pt-4 pb-2">
10    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#ejemplo</span>
11  </div>
12</div>

max-w-sm: Limita el ancho de la tarjeta a un tamaño pequeño.
shadow-lg: Añade una sombra grande alrededor de la tarjeta.

Los modales son ventanas emergentes que muestran contenido temporal.

1<div class="fixed z-10 inset-0 overflow-y-auto">
2  <div class="flex items-center justify-center min-h-screen">
3    <div class="bg-white rounded-lg shadow-xl max-w-lg w-full p-6">
4      <h2 class="text-lg font-bold mb-4">Título del Modal</h2>
5      <p class="mb-4">Este es el contenido del modal.</p>
6      <div class="flex justify-end">
7        <button class="bg-blue-500 text-white py-2 px-4 rounded">Cerrar</button>
8      </div>
9    </div>
10  </div>
11</div>

fixed: Hace que el modal esté fijo en la pantalla.
max-w-lg: Define el ancho máximo del modal.

Referencia: Modales en Tailwind

Creación de alertas y notificaciones

Tailwind te permite crear alertas y notificaciones que llamen la atención del usuario.

Alerta de error:

1<div class="bg-red-500 text-white p-4 rounded">
2  <p>Error: Algo salió mal.</p>
3</div>

Alerta de éxito:

1<div class="bg-green-500 text-white p-4 rounded flex items-center">
2  <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3    <path d="M5 13l4 4L19 7"/>
4  </svg>
5  <p>¡Éxito! Acción completada.</p>
6</div>

flex: Para alinear el icono y el texto en línea.
bg-green-500: Fondo verde para una alerta de éxito.

Referencia: Alertas en Tailwind

Implementación de tipografías personalizadas

Tailwind CSS facilita la implementación de fuentes personalizadas, incluidas las fuentes de Google Fonts.

Paso 1: Importar Google Fonts

Primero, incluye Google Fonts en tu proyecto, ya sea añadiendo una etiqueta <link> en el archivo HTML o importando en tu archivo CSS.

Enlace de Google Fonts en HTML:

1<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Paso 2: Configurar la fuente en Tailwind

En el archivo tailwind.config.js, añade la fuente personalizada en la propiedad fontFamily:

1module.exports = {
2  theme: {
3    extend: {
4      fontFamily: {
5        sans: ['Roboto', 'sans-serif'],
6      },
7    },
8  },
9}

Paso 3: Usar la fuente en tu proyecto

Ahora puedes aplicar la fuente personalizada en cualquier parte de tu proyecto:

1<p class="font-sans">Este texto usa la fuente Roboto.</p>

Curso de tailwind CSS