Ejercicio de programación con TailwindCSS: Fundamentos del diseño responsive en Tailwind CSS
Código
Aprende a implementar un diseño responsive utilizando breakpoints y clases utilitarias en Tailwind CSS 3.4.10. Adapta tu contenido a diferentes tamaños de pantalla.
- Crea un archivo HTML y enlaza Tailwind CSS desde un CDN.
- Añade un encabezado de primer nivel que sea visible en todas las pantallas pero que cambie de tamaño según el tamaño de la pantalla. En pantallas pequeñas un 2xl, en pantallas medianas un 4xl y en pantallas grandes un 6xl.
- Añade un párrafo que tenga diferentes márgenes según el tamaño de la pantalla. Un margen de 2 unidades en pantallas pequeñas, 4 unidades en pantallas medianas y 6 unidades en pantallas grandes.
- Añade una imagen que se ajuste al 100% del ancho en pantallas pequeñas y al 50% en pantallas medianas y mayores.
Todos los ejercicios de programación de TailwindCSS
Evalúa tus conocimientos con ejercicios de programación en TailwindCSS de tipo Test, Puzzle, Código y Proyecto con VSCode.
Listado y formulario de productos en Tailwind CSS
Proyecto
Flexbox en Tailwind CSS
Puzzle
Contenedores y columnas en Tailwind CSS
Código
Utilidades de espaciado y alineación en Tailwind CSS
Puzzle
Clases de bordes de Tailwind CSS
Código
Evaluación conocimiento Código Tailwind CSS
Código
Evaluación conocimiento Test Tailwind CSS
Test
Hover, focus y estado de Tailwind CSS
Código
Clases de colores y fondo de Tailwind CSS
Código
Clases de tamaño de Tailwind CSS
Puzzle
Instalación de Tailwind CSS
Código
Tipografía y fuentes en Tailwind CSS
Puzzle
Proyecto blog de artículos con Tailwind CSS
Proyecto
Transiciones y animaciones de Tailwind CSS
Código
Fundamentos del sistema Utility-First
Test
Grid en Tailwind CSS
Código
Introducción a Tailwind CSS
Test
Tutorial para resolver este ejercicio de programación
TailwindCSS
Fundamentos del diseño responsive
Fundamentos