Día 20 Estilo Github Card Parte 3

Día 20 Estilo Github Card Parte 3

Tabla de contenidos: Instalación, Aplicar utilidades de Tailwind CSS, Embellecer el diseño de la tarjeta, Repositorios de Github, Recursos

El estilado es la parte más sencilla de este ejercicio y los pasos son prácticamente los mismos en los distintos frameworks. Flujo general: 1 instalar tailwindcss y DaisyUI, 2 habilitar el plugin de DaisyUI en el CSS, 3 copiar el layout de card con imagen lateral desde DaisyUI, 4 reemplazar los textos estáticos por valores del perfil, 5 sustituir clases personalizadas por utilidades de Tailwind CSS.

Instalación en Vue 3 y SvelteKit: instala con npm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latest. Integra Tailwind en Vite importando el plugin @tailwindcss/vite y registrándolo en la sección plugins de la configuración. En tu hoja de estilos, habilita DaisyUI añadiendo las directivas @import tailwindcss y @plugin daisyui.

Instalación en Angular 20: instala con npm install daisyui@latest tailwindcss@latest @tailwindcss/postcss@latest postcss@latest --force. Crea el archivo de configuración .postcssrc.json agregando el plugin @tailwindcss/postcss. En src/styles.css habilita DaisyUI con las directivas @import tailwindcss y @plugin daisyui.

Aplicar utilidades de Tailwind CSS: en el componente de lista de perfiles de Github, aplica utilidades al encabezado con p-[0.75rem] col-span-full text-center y elimina la antigua clase header del CSS. Para la distribución en rejilla, utiliza grid grid-cols-2 y espaciados pt-0 pb-0 pl-[2rem] pr-[2rem] en el contenedor principal. En Vue, aplica estas clases en el template del componente raíz. En SvelteKit, añádelas al contenedor del layout. En Angular, usa @reference para incluir el styles.css sin duplicación y @apply dentro de :host para aplicar grid grid-cols-2 y los paddings correspondientes.

Embellecer la tarjeta con DaisyUI: utiliza la estructura de tarjeta card card-side bg-base-100 shadow-sm. Coloca la imagen del perfil en un figure con basis-[30%] grow shrink y el contenido en un contenedor card-body con basis-[70%] grow shrink. Dentro, muestra login, name, bio con valor por defecto N/A, followers, following y public_repos. Añade acciones en la parte inferior con card-actions justify-end y un botón btn btn-primary que enlace al perfil en Github. Las directivas de control varían según el framework: en Vue se usa v-if y las llaves dobles para interpolación, en Svelte se usa el bloque {#if}{/if} y la sintaxis de llaves, y en Angular 20 se emplean las nuevas construcciones @let y @if junto con el enlace de propiedades.

Repositorios de Github: Vue 3 vue-github-profile, Svelte 5 svelte-github-profile, Angular 20 angular-github-profile.

Recursos: documentación oficial de DaisyUI para consultar componentes, temas y personalización.

En Q2BSTUDIO impulsamos proyectos frontend y backend de alto rendimiento combinando buenas prácticas de UI con estrategias de arquitectura modernas. Somos una empresa de desarrollo de software enfocada en aplicaciones a medida y software a medida, con experiencia en inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio y power bi. Si tu organización busca acelerar la entrega de productos con un diseño consistente y escalable, te ayudamos a crear bibliotecas de componentes reutilizables, sistemas de diseño y automatizaciones CI que integran pruebas, accesibilidad y seguridad desde el inicio.

Nuestros equipos aplican ia para empresas con agentes IA para acelerar la extracción de insights, generación de contenido y soporte, siempre bajo estándares de ciberseguridad y cumplimiento. Conectamos tus datos y dashboards con prácticas de analítica moderna para que tus decisiones estén guiadas por métricas claras y accionables. Si necesitas un partner experto para crear tu próxima plataforma o evolución tecnológica, conoce nuestro servicio de desarrollo de aplicaciones a medida.

Consejos finales: mantén la configuración de Tailwind y DaisyUI lo más simple posible, prioriza utilidades en vez de CSS ad hoc, y documenta los patrones de tarjetas y grids para que tu equipo los reutilice en cualquier stack, ya sea Vue, Svelte o Angular. Así lograrás consistencia visual, menor deuda técnica y una experiencia coherente en todo tu producto.