Tailwind y shadcn/ui en práctica
14 artículos en esta serie
Una ruta UI moderna para Tailwind, design tokens, componentes shadcn/ui, temas, formularios y organización.
Tailwind v4 + Vite: plantilla completa de configuración en 5 minutos
Configura un proyecto Tailwind CSS v4 + Vite desde cero con plantilla de 5 minutos y estructura de directorios recomendada. Incluye checklist de migración v3→v4
Tailwind CSS v4: novedades, rendimiento y guía de migración
Guía de Tailwind CSS v4: motor Oxide, configuración CSS-first, instalación simplificada y cambios breaking. Incluye checklist de migración v3→v4 y pasos operativos
¿Qué es shadcn/ui? Guía de comparación con MUI, Chakra y otras bibliotecas
Comparación profunda de shadcn/ui, Material-UI, Chakra UI y Ant Design en siete dimensiones: tamaño del bundle, flexibilidad, experiencia de desarrollo y accesibilidad, para elegir la mejor opción
Guía completa de instalación y personalización de temas en shadcn/ui (con variables CSS)
Instalación y personalización de temas en shadcn/ui: variables CSS, colores OKLCH y modo oscuro. Aprende las mejores prácticas de UI con identidad de marca y configura lo básico en 5 minutos
Esqueleto de panel con shadcn/ui: mejores prácticas de Sidebar + Layout
Integra Sidebar de shadcn/ui con Layout de Next.js: arquitectura de componentes, diseño responsive y control de permisos. Esqueleto de administración extensible con ejemplos completos
Diseño responsive con Tailwind: container queries y estrategia de breakpoints
Container queries y breakpoints en Tailwind CSS: de la ventana al contenedor, y cómo lograr layouts responsive a nivel de componente.
Modo oscuro en Tailwind: comparación entre class y data-theme
Comparación completa de las estrategias class y data-theme para el modo oscuro en Tailwind CSS: principios, configuración e integración con frameworks para elegir la mejor opción
Patrones de composición en shadcn/ui: mejores prácticas para que varios componentes trabajen juntos
Aprende las mejores prácticas de los patrones de composición de shadcn/ui: Dialog+Form, DataTable+DropdownMenu y escenarios habituales, con el patrón Context, gestión de estado y optimización del rendimiento
shadcn/ui y Radix: cómo mantener la accesibilidad al personalizar componentes
shadcn/ui se basa en Radix Primitives. Aprende a preservar la accesibilidad al personalizar componentes: uso de asChild, gestión del foco y herencia ARIA, evitando fallos de navegación por teclado.
Dialog, Sheet y Popover: accesibilidad y gestión del foco en capas modales
Análisis profundo de la accesibilidad y la gestión del foco en Dialog, Sheet y Popover de shadcn/ui: estándares WCAG, atributos ARIA, navegación por teclado y trampa de foco, con ejemplos de código completos
Optimización del rendimiento de Tailwind: JIT, configuración de content y control del tamaño en producción
Guía detallada del modo JIT de Tailwind CSS, mejores prácticas de configuración de content y estrategia de optimización en cuatro capas para producción, con casos reales y análisis de Tailwind v4
Astro + Tailwind: configurar estilos sin conflictos con los componentes islands
¿Conflictos de estilos Tailwind CSS con la arquitectura islands de Astro? Esta guía explica astro-island/astro-slot, la integración correcta de Tailwind v4 y cuatro escenarios habituales de conflictos CSS con sus soluciones
React Compiler + shadcn/ui: desarrollo frontend en la era de la optimización automática
Guía práctica de React Compiler en proyectos shadcn/ui: cómo activarlo, lecciones reales, puntos clave de migración y comparativa de rendimiento para pasar de la optimización manual a la automática
Solución de problemas comunes de shadcn/ui: conflictos de estilos, componentes que no renderizan y errores de tipos
Repaso sistemático de las tres grandes categorías de problemas al desarrollar con shadcn/ui, con pasos de diagnóstico y soluciones para localizar y corregir conflictos de estilos, fallos de renderizado y errores de TypeScript
