Día 20 - Tarjeta GitHub Proyecto Parte 3 - Estilo

Día 20 - Tarjeta GitHub Proyecto Parte 3 - Estilo

En esta entrega nos centramos en el estilo de la interfaz con Tailwind CSS y DaisyUI para una tarjeta de perfil de GitHub reutilizable en Vue 3, SvelteKit y Angular 20. La parte visual es directa cuando se sigue una pauta clara: instalar dependencias, habilitar los plugins y sustituir estilos personalizados por utilidades de Tailwind. El objetivo es un resultado coherente entre frameworks, con un layout en cuadrícula y una card moderna, accesible y fácil de mantener.

Instalación en Vue 3 y SvelteKit: instala tailwindcss latest, @tailwindcss vite latest y daisyui latest con npm. Después, integra el plugin de Tailwind en Vite importando @tailwindcss vite y añadiéndolo a la lista de plugins. Finalmente, habilita DaisyUI en tu hoja de estilos con las directivas de Tailwind y el plugin de DaisyUI. Con esto tendrás listas las utilidades y los componentes base para construir la tarjeta.

Instalación en Angular 20: instala daisyui latest, tailwindcss latest, @tailwindcss postcss latest y postcss latest usando la opción --force si es necesario. Crea o ajusta el archivo de configuración postcss para activar el plugin de Tailwind a través de @tailwindcss postcss y añade DaisyUI en tu archivo global de estilos. De esta forma, Angular compila correctamente las utilidades y componentes sin pasos adicionales.

Aplicar utilidades de Tailwind CSS: sustituye clases personalizadas por utilidades como p para espaciado, text para tipografías y grid para layout. Por ejemplo, en el encabezado de la lista de perfiles puedes usar padding uniforme y centrado de texto con p y text center. El layout general puede definirse con grid y grid cols 2, añadiendo márgenes internos con pl pr y pt pb en valores responsivos según tu diseño.

Grid y organización por framework: en Vue 3, establece en el contenedor principal una cuadrícula de dos columnas con grid y grid cols 2, añadiendo padding lateral con pl y pr. En SvelteKit, utiliza el layout raíz con una estructura equivalente, asegurando que el renderizado de vistas hijas herede el contenedor en cuadrícula. En Angular 20, puedes declarar estilos en el decorador del componente raíz usando @reference al archivo global de estilos para habilitar @apply y componer utilidades como grid grid cols 2 y espaciados sin duplicar declarativas.

Card mejorada con DaisyUI: la base es el componente card con variante card side para situar imagen y contenido en formato horizontal. Coloca el avatar en una sección figure y el contenido en card body. Muestra campos clave como login, nombre, bio con valor alternativo N A, seguidores, siguiendo y repos públicos. Añade una acción clara con un botón btn btn primary que abre el perfil en GitHub en una pestaña nueva. En Vue 3, controla el renderizado con v if para estados con perfil o error. En SvelteKit, utiliza bloques if para alternar entre perfil, carga y error. En Angular 20, apóyate en las nuevas construcciones de control @let y @if para gestionar estados loading, error y éxito, manteniendo la plantilla concisa y legible.

Buenas prácticas adicionales: elimina reglas CSS redundantes cuando una utilidad Tailwind cubra el mismo caso. Mantén la semántica y accesibilidad con etiquetas adecuadas e incluye textos alternativos para imágenes. Evita estilos en línea que rompan la coherencia del diseño y confía en utilidades, variantes de estado y componentes base de DaisyUI. Para layouts complejos, separa responsabilidades en componentes pequeños y reutilizables.

Repositorios de ejemplo: consulta el repo Vue 3, el repo Svelte 5 y el repo Angular 20 con las implementaciones completas y diferencias de sintaxis entre frameworks.

Recurso recomendado: el sitio oficial de DaisyUI donde encontrarás tarjetas, botones, badges y más componentes listos para usar con temas personalizables.

Sobre Q2BSTUDIO: somos una empresa de desarrollo con foco en aplicaciones a medida y software a medida, especialistas en inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio y power bi, automatización de procesos, agentes IA y soluciones de ia para empresas. Integramos frontend moderno con arquitecturas escalables, automatización y analítica avanzada para acelerar tus productos digitales. Descubre cómo llevamos tus ideas a producción con nuestro servicio de aplicaciones y software a medida y potencia tus productos con inteligencia artificial para empresas alineada a casos de uso reales.

Conclusión y próximos pasos: con Tailwind CSS y DaisyUI, el estilo de una tarjeta de perfil de GitHub se implementa de forma rápida, consistente y extensible. La clave está en configurar bien los plugins, reemplazar CSS a medida por utilidades y respetar patrones de control de flujo propios de cada framework. Si buscas un equipo que construya interfaces robustas, seguros y listas para escalar, en Q2BSTUDIO te acompañamos desde la ideación hasta el despliegue con enfoque en calidad, rendimiento y negocio.