WorksheetsTailwind basico
Total questions: 45
Worksheet time: 37mins
¿Qué es Tailwind CSS?
Un framework de JavaScript
Una librería de backend
Un framework de utilidades para CSS
Un CMS
¿Qué permite Tailwind al usar clases?
Escribir menos HTML
Crear archivos JSON
Estilizar directamente en el HTML
Reemplazar JavaScript
¿Tailwind elimina la necesidad de escribir CSS?
Sí, completamente
Solo en React
En la mayoría de los casos
No, se necesita CSS puro siempre
¿Cómo se instala Tailwind en un proyecto con Node.js?
(a)
¿Cuál clase ajusta el tamaño del texto a extra grande 2?
(a)
¿Qué clase elimina márgenes?
(a)
¿Cómo se aplica un padding de 2rem?
(a)
¿Qué hace hover:bg-gray-700?
Cambia color al hacer clic
Cambia color al enfocar
Cambia color al pasar el mouse
Nada
¿Qué hace focus:outline-none?
Aplica borde
Elimina el contorno al enfocar
Hace invisible el texto
Aplica margen
¿Qué significa active:bg-blue-900?
Activa fondo siempre
Aplica fondo azul al hacer clic
Aplica fondo azul al enfocar
Fondo en pantallas activas
¿Qué clase aplica opacidad 50 al hacer hover?
(a)
¿Tailwind soporta pseudo-clases como hover y focus?
Si
No
Clase para colocar blanco un texto
(a)
¿Se pueden crear componentes reutilizables con Tailwind?
Si
No
Equivalente de display: flex en Tailwind.
(a)
Equivalente de display: grid en Tailwind.
(a)
Equivalente de justify-content: center en Tailwind.
(a)
Equivalente de align-items: center en Tailwind.
(a)
Equivalente de flex-direction: column en Tailwind.
(a)
Equivalente de flex-wrap: wrap en Tailwind.
(a)
Equivalente de gap: 1rem horizontal en Tailwind.
(a)
Equivalente de gap: 2rem vertical en Tailwind.
(a)
Clase para que un elemento ocupe todo el ancho disponible (width: 100%).
(a)
Clase para que un elemento ocupe todo el alto disponible (height: 100%).
(a)
Clase para que un elemento ocupe todo el ancho de la ventana (width: 100vw).
(a)
Clase para que un elemento ocupe todo el alto de la ventana (height: 100vh).
(a)
Clase para centrar un elemento con margen automático (margin: auto).
(a)
Clase de Tailwind para margin-top: 2rem.
(a)
Clase de Tailwind para padding: 1rem en todos los lados.
(a)
Clase para aplicar padding-left: 0.5rem.
(a)
Clase para aplicar margin horizontal: 1.5rem.
(a)
Clase para aplicar padding vertical: 0.75rem.
(a)
Clase para aplicar color de fondo azul 500.
(a)
Clase para fondo negro al pasar el cursor.
(a)
Clase para convertir texto a mayúsculas.
(a)
Clase para ocultar un elemento.
(a)
¿Cómo se puede personalizar el tema en Tailwind V3?
Solo a través de JavaScript
No se puede personalizar
Usando el archivo tailwind.config.js
Modificando el archivo CSS directamente
¿Qué hace el comando @apply en Tailwind?
Aplica estilos de clases a un selector CSS
Genera un nuevo archivo CSS
Elimina clases de un elemento
Compila JavaScript
¿Qué hace la clase md:text-lg en Tailwind?
Aplica un tamaño de texto grande en todas las pantallas
Elimina el tamaño de texto en pantallas medianas
Aplica un tamaño de texto pequeño en pantallas medianas
Aplica un tamaño de texto grande en pantallas medianas y superiores
¿Qué hace la clase lg:flex en Tailwind?
Aplica un margen en pantallas grandes
Aplica un tamaño de texto grande en pantallas grandes
Elimina el flexbox en pantallas grandes
Aplica flexbox en pantallas grandes
¿Cómo se puede agregar un color personalizado en Tailwind V3?
No se puede agregar colores personalizados
Agregando un nuevo archivo CSS
Usando solo CSS puro
Modificando el archivo tailwind.config.js
¿Qué hace la clase rounded-full en Tailwind?
Aplica bordes redondeados completos
Aplica un fondo colorido
Elimina los bordes de un elemento
Aplica un tamaño de texto grande
¿Qué hace la clase p-4 en Tailwind?
Aplica un padding de 4 unidades
Aplica un margen de 4 unidades
Elimina el padding de un elemento
Aplica un tamaño de texto de 4 unidades
¿Cómo se puede implementar un diseño responsivo con Tailwind?
Usando clases de tamaño de pantalla como sm, md, lg
Solo con CSS puro
No se puede implementar un diseño responsivo
Usando JavaScript exclusivamente
¿Qué hace la clase text-center en Tailwind?
Aplica un color de texto específico
Alinea el texto al centro
Alinea el texto a la izquierda
Alinea el texto a la derecha
