Tip: Una buena práctica al combinar colores, como en botones por ejemplo, es no poner la letra color blanco o negro. En su lugar utiliza las tonalidades del mismo color para hacerla resaltar.
● Crea un botón color azul siguiendo estos consejos, recuerda que las tonalidades predefinidas van del 100 al 900.
● Crea un botón que se adapte según el tamaño de dispositivo.
● Cuando sea de tamaño pequeño, este botón debe abarcar el ancho de la pantalla y cuando sea un poco más grande debe tener un tamaño predeterminado.
Si no estás seguro sobre cuáles colores escoger, te recomiendo que uses Paletton, ahí podrás escoger un color y el programa te sugerirá colores que puedan combinar. (https://paletton.com/)
Display y Flexbox
Tip: Una buena práctica es utilizar el margen de cada elemento para posicionarlo con respecto a otros. Esto se logra con margin left (ml-x), margin-top (mt-x). Si usamos margin right y margin bottom lo que hacemos es mover otros elementos respecto del elemento con el que estamos trabajando.
● Crea lo que se conoce como group button de 3 buttons o más. Esto lo logras utilizando lo aprendido en display o flexbox, así como margin y padding.
Pseudo—Class Variants
Utilizando variantes como hover y active, logra crear efectos cambiando el color de los botones creados anteriormente.
● Cuando pases el cursor encima de uno de los botones deberá cambiar el fondo a un color más oscuro, de tal manera que resalte con el texto. Y al estar en estado normal, el fondo deberá ser claro y el texto, color oscuro.
Extraer componentes usando @apply
Utilizando la directiva @apply, crea un componente de “alert” con sus variaciones para que se comporte distinto según la clase que le acompañe.
Hay que crear:
● alert (default) - Utiliza un color neutro
● alert (danger) - Utiliza un color rojo
● alert (warning) - Utiliza un color amarillo o naranja
● alert (info) - Utiliza un color azul
Para desarrollar este reto tendrás que hacer uso de:
● margin
● padding
● border
● background
● text color
El código de tu componente de poderse utilizar como sigue:
El código de tu componente debería verse así:
<div class= “alert”>Este mensaje es una alerta default.</div><div class= “alert alert-danger”>Este mensaje es una alerta danger.</div><div class= “alert alert-warning”>Este mensaje es una alerta warning.</div><div class= “alert alert-info”>Este mensaje es una alerta info.</div>
Me gusta Tailwind, pero creo que son muchas clases las que al final se terminan aplicando sobre un elemento, aunque imagino que para eso existe @apply y evitar que el HTML se sobre cargue. Mis retos:
Soy pésimo para esto de la diseñada. Pero ahí voy.
Wenas a tod@s;
Aquí mi reto:
Me ayudé con los ejemplos de los compañeros.
Saludos.
¿Para Tailwind (PostCSS) existe algún @extend?
Por ejemplo si vamos a crear varios alerts ¿No seria mejor crear un solo alert y luego crear sus derivados siempre usando las mismas reglas del base?
Como diria Patricio Estrella "Hice todo lo que pude"
La parte de @apply no logre entender lastimosamente pero, dejo hasta donde pude realizar el ejercicio. Si alguien me puede indicar la manera de como usar correctamente y en que carpeta debe ir el @apply se lo agradecería.
¿Cómo puedo agregar una imagen a mis aportaciones?
no funciona el método recomendado de arrastrar y soltar, estoy utilizando Firefox en Macos Catalina.
Hola
Otra forma es subir la imagen a un sitio como Imgur y después usar la herramienta de adjuntar imagen de la caja de comentarios.
Una vez tengas subida la imagen a Imgur tienes que hacer click derecho en la imagen y copiar la dirección de enlace de la imagen dentro de los paréntesis que aparecen cuando haces click en imagen, también puedes usar ctrl +shif+ i .El formato es el siguiente:
.
Asegúrate de que la url contenga la dirección correcta y completa con el formato de la imagen como .jpg .png .gif etc.
Este método tiene la ventaja de que funciona con GIFs.
En mi caso, a la fecha, simplemente arrastré la imagen al editor, lo que insertó directamente la imagen con el formato solicitado.
Saludos...
