Componentes UI Comunes

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.

1. 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:

• 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:

Referencia: Botones en Tailwind

2. 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:

• 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:

Lista básica:

• 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.

• 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.

Modal básico: #

Los modales son ventanas emergentes que muestran contenido temporal.

• 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:

Alerta de éxito:

• 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: