¡Es hora de practicar!

Clase 15 de 29 • Curso de Tailwind CSS 1

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>

Comentarios

Carlos Enrique Rojas Falcone

student•

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;
}

Fernando Mejia

student•

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

student•

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
}

Jimmy Buriticá Londoño

student•

Te quedo muy bien

Michael Garcia

student•

Reto completado! osiosi

Codigo HTML

Codigo Tailwind

Configuración Tailwind

Beto Martinez

student•

Muy bonitos

Juan Esteban García Giraldo

student•

Felipe de Jesús Galindo Aguilar

student•

Soy pésimo para esto de la diseñada. Pero ahí voy.

John Ruiz

student•

Wenas a tod@s;

Aquí mi reto:

Me ayudé con los ejemplos de los compañeros.

Saludos.

Eduardo Reyes

student•

¿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

student•

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

student•

Así quedo el reto:

Carlos Roberto Villatoro Barrios

student•

Resultado de mi reto:

David Constante

student•

Como diria Patricio Estrella "Hice todo lo que pude"

Christian Alvarenga

student•

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>

Cristian Oswaldo Sacta Martos

student•

Ahi se los dejo

Guillermo Camacho

student•

Reto finish!!

Abril Darynka Tapia Sosa

student•

**Reto completado ** ![](

![](

Código ejercicio.html

<div class="m-10 bg-gray-100 flex justify-center ">
       <button class="px-2 py-4 bg-blue-800 text-blue-200 font-bold rounded-lg md:w-44 sm:w-56 w-full">
           Sectumsempra -- ⚡
        </button>
    </div>
    <div class="m-10 bg-blue-100 flex flex-col justify-center items-center	">
        <p class="font-bold	uppercase text-xl">Display y Flexbox</p>
        <div class="flex justify-center items-center gap-6 my-5 flex-wrap">
            <button class="px-2 py-4 bg-blue-800 text-blue-200 font-bold rounded-lg md:w-44 sm:w-56 w-full hover:change-color">
                Bombarda
            </button>
            <button class="px-2 py-4 bg-blue-800 text-blue-200 font-bold rounded-lg md:w-44 sm:w-56 w-full hover:change-color">
                Lumus
            </button>
            <button class="px-2 py-4 bg-blue-800 text-blue-200 font-bold rounded-lg md:w-44 sm:w-56 w-full hover:change-color">
                Nox
            </button>
        </div>
    </div>
    <div class="m-10 bg-blue-100 flex flex-col justify-center items-center">
        <p class="font-bold	uppercase text-xl">Alert</p>
        <div class="flex justify-center items-center gap-6 my-5 flex-wrap w-full px-8"> 
            <div class="alert default">
                Default
            </div>
            <div class="alert danger">
                Danger
            </div>
            <div class="alert warning">
                Warning
            </div>
            <div class="alert info">
                Info
            </div>
        </div>
    </div>

tailwind.css

@variants hover{
    .zoom {
        transform: scale(2); 
    }
    .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
}

Daniel Jonguitud

student•

Colores y Dimesiones:

&lt;div class=&quot;flex mt-20 justify-center&quot;&gt;
      &lt;button class=&quot;btn w-full lg:w-1/2 bg-blue-900&quot;&gt;
        &lt;span class=&quot;text-blue-100&quot;&gt;Botón&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;

Display y Flexbox, Pseudo—Class Variants:

div class=&quot;flex flex-wrap mt-2&quot;&gt;
        &lt;button class=&quot;active:bg-black hover:bg-green-900 w-full sm:w-1/3 p-4 bg-green-500 border&quot;&gt;
            &lt;span class=&quot;hover:text-green-400 text-green-100&quot;&gt;Botón&lt;/span&gt;
        &lt;/button&gt;
        &lt;button class=&quot;active:bg-blue-800 hover:bg-yellow-800 w-full sm:w-1/3 p-4 bg-red-800 border&quot;&gt;
            &lt;span class=&quot;text-red-100&quot;&gt;Botón&lt;/span&gt;
        &lt;/button&gt;
        &lt;button class=&quot;active:bg-blue-800 hover:bg-green-800 w-full sm:w-1/3 p-4 bg-yellow-800 border&quot;&gt;
            &lt;span class=&quot;text-yellow-100&quot;&gt;Botón&lt;/span&gt;
        &lt;/button&gt;
        &lt;/div&gt;

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;
}

Bidkar Aragón Cárdenas

student•

¿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

student•

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:

![](https://www.imgur.com/mi tarea.jpg)

. 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

student•

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

student•

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);
    }
}

Marco Antonio Alducin Garcia

student•

Pues esta aca mi resultado.

Yo igual segui uno que otro comentario.

<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];
    }
}

Israel José Huallpara Mencias

student•

Hola !!! Esta es mi solución del reto

Y el código se encuentra en mi repositorio del proyecto... Saludos....

<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>

	<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>

.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;
}

@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;

<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>

.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
}

<!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>

<div class="m-10 bg-gray-100 flex justify-center ">
       <button class="px-2 py-4 bg-blue-800 text-blue-200 font-bold rounded-lg md:w-44 sm:w-56 w-full">
           Sectumsempra -- ⚡
        </button>
    </div>
    <div class="m-10 bg-blue-100 flex flex-col justify-center items-center	">
        <p class="font-bold	uppercase text-xl">Display y Flexbox</p>
        <div class="flex justify-center items-center gap-6 my-5 flex-wrap">
            <button class="px-2 py-4 bg-blue-800 text-blue-200 font-bold rounded-lg md:w-44 sm:w-56 w-full hover:change-color">
                Bombarda
            </button>
            <button class="px-2 py-4 bg-blue-800 text-blue-200 font-bold rounded-lg md:w-44 sm:w-56 w-full hover:change-color">
                Lumus
            </button>
            <button class="px-2 py-4 bg-blue-800 text-blue-200 font-bold rounded-lg md:w-44 sm:w-56 w-full hover:change-color">
                Nox
            </button>
        </div>
    </div>
    <div class="m-10 bg-blue-100 flex flex-col justify-center items-center">
        <p class="font-bold	uppercase text-xl">Alert</p>
        <div class="flex justify-center items-center gap-6 my-5 flex-wrap w-full px-8"> 
            <div class="alert default">
                Default
            </div>
            <div class="alert danger">
                Danger
            </div>
            <div class="alert warning">
                Warning
            </div>
            <div class="alert info">
                Info
            </div>
        </div>
    </div>

@variants hover{
    .zoom {
        transform: scale(2); 
    }
    .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
}

&lt;div class=&quot;flex mt-20 justify-center&quot;&gt;
      &lt;button class=&quot;btn w-full lg:w-1/2 bg-blue-900&quot;&gt;
        &lt;span class=&quot;text-blue-100&quot;&gt;Botón&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;

div class=&quot;flex flex-wrap mt-2&quot;&gt;
        &lt;button class=&quot;active:bg-black hover:bg-green-900 w-full sm:w-1/3 p-4 bg-green-500 border&quot;&gt;
            &lt;span class=&quot;hover:text-green-400 text-green-100&quot;&gt;Botón&lt;/span&gt;
        &lt;/button&gt;
        &lt;button class=&quot;active:bg-blue-800 hover:bg-yellow-800 w-full sm:w-1/3 p-4 bg-red-800 border&quot;&gt;
            &lt;span class=&quot;text-red-100&quot;&gt;Botón&lt;/span&gt;
        &lt;/button&gt;
        &lt;button class=&quot;active:bg-blue-800 hover:bg-green-800 w-full sm:w-1/3 p-4 bg-yellow-800 border&quot;&gt;
            &lt;span class=&quot;text-yellow-100&quot;&gt;Botón&lt;/span&gt;
        &lt;/button&gt;
        &lt;/div&gt;

.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;
}

<!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>

@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);
    }
}

<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];
    }
}

¡Es hora de practicar!

Introducción, instalación y ambiente de desarrollo

¿Qué es Tailwind CSS?

Instalación y ambiente de desarrollo

Directivas de Tailwind

Conceptos básicos

Personalización y configuración

Responsive Design, Mobile First y Utility First

Utilerías

Colores

Cómo crear grids o columnas en Tailwind CSS

Dimensiones y Espacios

Cambiando las propiedades de la tipografía

Ajustando el espaciado entre letras y líneas

Display

Flexbox

Crea tus propias utilerías

Entendiendo las variantes y las pseudo-clases

¡Es hora de practicar!

Proyecto: PlatziFood

Creando una card

Aplicando formato a la card

Responsive design en la card

Construye el header

Crea el footer

Crea un banner

Cómo integrar una card

Forms

Directivas de Apply

Extraer componentes

Navbar

Alpine JS

Optimiza tu archivo: PurgeCSS y NanoCSS

Conclusiones

Conclusiones y qué sigue