Sabino Fernández
Jimmy Buriticá Londoño
Te quedo muy bien
Colores y Dimensiones
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>
Resultado del Reto:
HTML
<h1 class="text-2xl mt-10">Colores y Dimensiones</h1> <button class="bg-blue-800 text-blue-200 py-2 px-5 mt-5 rounded w-full sm:w-48"> Submit </button> <h1 class="text-2xl mt-10">Display y Flexbox</h1> <div class="flex flex-wrap"> <button class="bg-blue-800 text-blue-200 py-2 px-5 ml-5 mt-5 rounded w-full sm:w-48"> Submit </button> <button class="bg-blue-800 text-blue-200 py-2 px-5 ml-5 mt-5 rounded w-full sm:w-48"> Submit </button> <button class="bg-blue-800 text-blue-200 py-2 px-5 ml-5 mt-5 rounded w-full sm:w-48"> Submit </button> </div> <h1 class="text-2xl mt-10">Pseudo—Class Variants</h1> <p>Nota: en Variants se agrega 'active' a backgroundColor y textColor</p> <div class="flex flex-wrap"> <button class="hover:bg-blue-800 hover:text-blue-200 active:bg-blue-600 focus:bg-blue-800 focus:text-blue-200 focus:outline-none focus:shadow-outline bg-blue-200 text-blue-800 py-2 px-5 ml-5 mt-5 rounded w-full sm:w-48"> Submit </button> <button class="hover:bg-blue-800 hover:text-blue-200 active:bg-blue-600 focus:bg-blue-800 focus:text-blue-200 focus:outline-none focus:shadow-outline bg-blue-200 text-blue-800 py-2 px-5 ml-5 mt-5 rounded w-full sm:w-48"> Submit </button> <button class="hover:bg-blue-800 hover:text-blue-200 active:bg-blue-600 focus:bg-blue-800 focus:text-blue-200 focus:outline-none focus:shadow-outline bg-blue-200 text-blue-800 py-2 px-5 ml-5 mt-5 rounded w-full sm:w-48"> Submit </button> </div> <h1 class="text-2xl mt-10">Extraer componentes usando @apply</h1> <div class="flex flex-wrap"> <div class="alert alert-default"> 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> </div>
TailwindCSS
.alert { @apply py-2 px-4 mt-5 ml-5 rounded; } .alert-default { @apply bg-gray-100 text-gray-700 border border-gray-400; } .alert-danger { @apply bg-red-100 text-red-700 border border-red-400; } .alert-warning { @apply bg-orange-100 text-orange-700 border border-orange-400; } .alert-info { @apply bg-blue-100 text-blue-700 border border-blue-400; }
Ojo recordar que las directivas @apply deben ir antes de agregar las utilities en el archivo tailwind.css
@tailwind base; @tailwind components; .btn-blue { @apply bg-blue-500 text-white font-bold py-2 px-4 rounded; } .btn-blue:hover { @apply bg-blue-700; } .btn-red { @apply bg-red-800 text-white font-bold py-2 px-4 rounded; } .btn-red:hover { @apply bg-red-900; } .alert { @apply bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 m-32; } .alert-warning { @apply bg-yellow-100 text-yellow-700 border-yellow-500; } .alert-info { @apply bg-indigo-100 text-indigo-700 border-indigo-500; } .alert-danger { @apply bg-red-100 text-red-700 border-red-500; } .alert-success { @apply bg-green-100 text-green-700 border-green-500; } @tailwind utilities;
Sabino Fernández
Jimmy Buriticá Londoño
Te quedo muy bien
Michael Garcia
Reto completado! osiosi
Codigo HTML
Codigo Tailwind
Configuración Tailwind
Beto Martinez
Muy bonitos
Felipe de Jesús Galindo Aguilar
Soy pésimo para esto de la diseñada. Pero ahí voy.
John Ruiz
Wenas a tod@s;
Aquí mi reto:
Me ayudé con los ejemplos de los compañeros.
Saludos.
Eduardo Reyes
¿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?
Cristian Luna Yujra
En mi caso yo hago eso con @apply, para mas informacion en la doc: https://tailwindcss.com/docs/functions-and-directives#apply
Ezequiel Rodriguez Esparza
Así quedo el reto:
Carlos Roberto Villatoro Barrios
Resultado de mi reto:
David Constante
Como diria Patricio Estrella "Hice todo lo que pude"
Christian Alvarenga
Cristian Oswaldo Sacta Martos
Ahi se los dejo
Guillermo Camacho
Reto finish!!
Abril Darynka Tapia Sosa
Daniel Jonguitud
Bidkar Aragón Cárdenas
¿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.
David Rodriguez Postigo
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.
Israel José Huallpara Mencias
En mi caso, a la fecha, simplemente arrastré la imagen al editor, lo que insertó directamente la imagen con el formato solicitado. Saludos...
Edgar Roy Huaman Pumachapi
Marco Antonio Alducin Garcia
Israel José Huallpara Mencias
Hola !!! Esta es mi solución del reto
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:
mobile:
desktop:
HTML:
<body class="flex flex-col"> <h1 class="font-bold text-center mt-2">Reto 1 🥇</h1> <div class="flex flex-col md:flex-row justify-center m-10 mt-6"> <button class="btn bg-green-300 md:w-1/4 active:btn-active"> ¡No me toques! </button> </div> <h1 class="font-bold text-center mt-2">Reto 2 🥈</h1> <div class="flex flex-col md:flex-row md:justify-around m-10 mt-6"> <button class="btn bg-blue-300 md:w-1/4 active:btn-active"> ¡Toca aquí! </button> <button class="btn bg-red-300 md:w-1/4 active:btn-active"> ¡Toca allá! </button> <button class="btn bg-orange-300 md:w-1/4 active:btn-active"> ¡Toca lejos! </button> </div> <h1 class="font-bold text-center mt-2">Reto 3 🥉</h1> <div class="flex flex-col md:items-center m-10 mt-6"> <button class="alert neutral md:w-3/4 active:btn-active"> Something neutral happened. </button> <button class="alert bad md:w-3/4 active:btn-active"> Something bad happened. </button> <button class="alert strange md:w-3/4 active:btn-active"> Something strange happened. </button> <button class="alert good md:w-3/4 active:btn-active"> Something good happened. </button> <button class="alert information md:w-3/4 active:btn-active"> This is information. </button> </div> </body>
Tailwind CSS:
.neutral { @apply text-gray-700 bg-gray-300 border-gray-700 } .bad { @apply text-red-700 bg-red-300 border-red-700 } .strange { @apply text-orange-700 bg-orange-300 border-orange-700 } .good { @apply text-blue-700 bg-blue-300 border-blue-700 } .information { @apply text-green-700 bg-green-300 border-green-700 } .alert { @apply mb-2 p-2 rounded-md border-solid border-2 } .btn { @apply p-2 text-black rounded }
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.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Practicas</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <h1 class="text-center font-mono text-xl pt-8">TailwindCSS</h2> <div> <div class="mt-10 py-1 border-t border-b border-gray-800"> <h2 class="mx-auto max-w-max mb-3 text-lg font-semibold border-b-2 border-gray-400">Colores y Dimensiones</h3> <button class="block mx-auto bg-blue-600 h-8 w-full sm:w-5/6 md:w-2/6 text-blue-200 rounded" type="submit">Enviar</button> </div> <div class="mt-8 py-1 border-t border-b border-gray-800"> <h2 class="mx-auto max-w-max mb-3 text-lg font-semibold border-b-2 border-gray-400">Display y Flexbox</h3> <div class="w-30 flex justify-evenly"> <button class="bg-blue-600 text-blue-200 rounded w-1/6 h-8" type="submit">Enviar</button> <button class="bg-blue-600 text-blue-200 rounded w-1/6 h-8" type="submit">Enviar</button> <button class="bg-blue-600 text-blue-200 rounded w-1/6 h-8" type="submit">Enviar</button> </div> </div> <div class="mt-8 py-1 border-t border-b border-gray-800"> <h2 class="mx-auto max-w-max mb-3 text-lg font-semibold border-b-2 border-gray-400">Pseudo—Class Variants</h3> <div class="w-30 flex justify-evenly"> <button class="bg-blue-600 text-blue-200 rounded w-1/6 h-8 hover:bg-blue-800 hover:text-white" type="submit">Enviar</button> <button class="bg-blue-600 text-blue-200 rounded w-1/6 h-8 hover:bg-blue-800 hover:text-white" type="submit">Enviar</button> <button class="bg-blue-600 text-blue-200 rounded w-1/6 h-8 hover:bg-blue-800 hover:text-white" type="submit">Enviar</button> </div> </div> </div> </body> </html>
**Reto completado ** ; } .change-color{ background: rgb(157,132,183); color: rgb(112,11,151); } } .alert{ @apply w-full border-solid border-2 px-1 py-2 text-center font-bold; } .default{ @apply bg-gray-200 border-gray-400 } .danger{ @apply bg-red-200 border-red-400 } .warning{ @apply bg-yellow-200 border-yellow-400 } .info{ @apply bg-blue-200 border-blue-400 }
Colores y Dimesiones:
<div class="flex mt-20 justify-center"> <button class="btn w-full lg:w-1/2 bg-blue-900"> <span class="text-blue-100">Botón</span> </button> </div>
Display y Flexbox, Pseudo—Class Variants:
div class="flex flex-wrap mt-2"> <button class="active:bg-black hover:bg-green-900 w-full sm:w-1/3 p-4 bg-green-500 border"> <span class="hover:text-green-400 text-green-100">Botón</span> </button> <button class="active:bg-blue-800 hover:bg-yellow-800 w-full sm:w-1/3 p-4 bg-red-800 border"> <span class="text-red-100">Botón</span> </button> <button class="active:bg-blue-800 hover:bg-green-800 w-full sm:w-1/3 p-4 bg-yellow-800 border"> <span class="text-yellow-100">Botón</span> </button> </div>
Extraer componentes usando @apply:
.alert { @apply font-bold mx-10 my-10 p-10 border-4; } .alert-default { @apply bg-gray-500 text-gray-100; } .alert-danger { @apply bg-red-500 text-gray-100; } .alert-warning { @apply bg-yellow-500 text-gray-100; } .alert-info { @apply bg-blue-500 text-gray-100; }
MI aporte pequeño
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ejercicio</title> <link rel="stylesheet" href="./../dist/style.css"> <link rel="stylesheet" href="./css/all.css"> </head> <body> <div class="mx-auto bg-yellow-200 flex flex-col items-center p-10 " > <h1 class="text-yellow-600 text-xl font-bold">Reto 1: Colores y Dimensiones <i class="fa-solid fa-bullseye"></i></h2> <button class=" bg-blue-500 w-full sm:w-32 md:w-40 lg:w-60 font-medium text-white mt-4 text-sm p-2 rounded">Presionar</button> <h1 class="text-yellow-600 text-xl font-bold mt-8">Reto 2: Display y Flexbox <i class="fa-solid fa-bullseye"></i></h2> <div class="flex w-full flex-col sm:flex-row items-center justify-center sm:gap-4 "> <button class=" bg-blue-500 w-full sm:w-32 md:w-40 lg:w-60 font-medium text-white mt-4 text-sm p-2 rounded">Presionar 1</button> <button class=" bg-blue-500 w-full sm:w-32 md:w-40 lg:w-60 font-medium text-white mt-4 text-sm p-2 rounded">Presionar 2</button> <button class=" bg-blue-500 w-full sm:w-32 md:w-40 lg:w-60 font-medium text-white mt-4 text-sm p-2 rounded">Presionar 3</button> </div> <h1 class="text-yellow-600 text-xl font-bold mt-8">Reto 3: Pseudo—Class Variants <i class="fa-solid fa-bullseye"></i></h2> <div class="flex w-full flex-col sm:flex-row items-center justify-center sm:gap-4 "> <button class="change-color bg-blue-500 w-full sm:w-32 md:w-40 lg:w-60 font-medium text-white mt-4 text-sm p-2 rounded">Presionar 1</button> <button class="change-color bg-blue-500 w-full sm:w-32 md:w-40 lg:w-60 font-medium text-white mt-4 text-sm p-2 rounded">Presionar 2</button> <button class="change-color bg-blue-500 w-full sm:w-32 md:w-40 lg:w-60 font-medium text-white mt-4 text-sm p-2 rounded">Presionar 3</button> </div> <h1 class="text-yellow-600 text-xl font-bold mt-8">Reto 4: Extraer componentes usando @apply <i class="fa-solid fa-bullseye"></i></h2> <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> </div> </body> </html>
source css
@tailwind base; @tailwind components; @tailwind utilities; @layer utilities{ .zoom:hover{ transform: scale(2); } .change-color:hover{ background-color: #172554; } .rotate-45{ transform: rotate(45deg); } } @layer components{ body{ font-size: 62.5%; } .alert{ border-width: 1px; border-left-width: 0.5rem; border-right-width: 0.5rem; border-style: solid; padding: 0.5rem 2rem; margin: 1rem; width: 30rem; font-size: 0.8rem; font-weight: 400; border-color: rgb(233, 231, 231); color: rgb(214, 190, 190); background-color: rgb(223, 211, 211); font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } .alert-danger{ border-color: rgb(243, 101, 101); color: rgb(225, 66, 66); background-color: rgb(229, 147, 147); } .alert-warning{ border-color: rgb(246, 197, 104); color: rgb(255, 166, 0); background-color: rgb(242, 214, 162); } .alert-info{ border-color: skyblue; color: rgb(82, 173, 209); background-color: rgb(175, 208, 221); } }
Pues esta aca mi resultado.
<span>Colores y Dimensiones</span> <br> <button class="bg-blue-900 text-gray-200 text-center p-2 w-80 mx-8 sm:mx-20 sm:w-3/4 md:mx-32 md:w-4/6 lg:mx-40 xl:mx-72 xl:w-7/12 ">Hola</button> <br> <br> <span>Display y Flexbox</span> <br> <div class="flex flex-row"> <button class="bg-blue-900 text-gray-200 text-center p-2 w-1/3 mx-8">Hola</button> <button class="bg-blue-900 text-gray-200 text-center p-2 w-1/3 mx-8">Hola</button> <button class="bg-blue-900 text-gray-200 text-center p-2 w-1/3 mx-8">Hola</button> </div> <br> <br> <span>Pseudo—Class Variants</span> <br> <div class="flex flex-row"> <button class="border-2 border-blue-500 text-center p-2 w-1/3 mx-8 hover:bg-orange-900 hover:text-stone-300 hover:border-0 active:border-0 active:bg-yellow-200 active:text-yellow-950">Hola</button> <button class="border-2 border-blue-500 text-center p-2 w-1/3 mx-8 hover:bg-orange-900 hover:text-stone-300 hover:border-0 active:border-0 active:bg-yellow-200 active:text-yellow-950">Hola</button> <button class="border-2 border-blue-500 text-center p-2 w-1/3 mx-8 hover:bg-orange-900 hover:text-stone-300 hover:border-0 active:border-0 active:bg-yellow-200 active:text-yellow-950">Hola</button> </div> <br> <br> <span>Pseudo—Class Variants</span> <div class="flex flex-col m-2"> <div class="alert alert-success">Este mensaje es una alerta <span class="font-bold">Success</span></div> <div class="alert alert-info">Este mensaje es una alerta <span class="font-bold">Info</span></div> <div class="alert alert-warning">Este mensaje es una alerta <span class="font-bold">Warning</span></div> <div class="alert alert-danger">Este mensaje es una alerta <span class="font-bold">Danger</span></div> <div class="alert alert-default">Este mensaje es una alerta <span class="font-bold">Default</span></div> </div>
@layer components { .cerca{ background-color: #723400; color: #FFE2CB; border: #723400 1px solid; } .activo{ background-color: #E9E977; color: #2C2C00; border: #E9E977 1px solid; } .alert{ @apply w-full mb-2 p-4 border-4 text-center; } .alert-default{ @apply bg-white text-gray-900 border-gray-200; } .alert-success{ @apply bg-[#dff0d8] text-[#3c763d] border-[#d6e9c6]; } .alert-info{ @apply bg-[#d9edf7] text-[#31708f] border-[#bce8f1]; } .alert-warning{ @apply bg-[#fcf8e3] text-[#8a6d3b] border-[#faebcc]; } .alert-danger{ @apply bg-[#f2dede] text-[#a94442] border-[#ebccd1]; } }