Curso de Tailwind CSS 2020

Curso de Tailwind CSS 2020

Víctor Yoalli Domínguez

Víctor Yoalli Domínguez

¡Es hora de practicar!

15/29

Lectura

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>

Aportes 40

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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">PseudoClass 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;

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
}

Reto completado! osiosi

Codigo HTML

Codigo Tailwind

Configuración Tailwind

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

Wenas a [email protected];

Aquí mi reto:

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

Saludos.

Resultado de mi reto:

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.

<!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</h1>
    <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</h2>
        <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</h2>
        <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</h2>
        <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>

Ahi se los dejo

Reto finish!!

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

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

Default o xs breakpoint:

sm breakpoint:

md breakpoint:

Por aquí les comparto mi reto, saludos!

RETO

Reto cumplido!

Vista desde Mobile:

Vista desde Desktop:

Primer reto

    <div class="m-10">
        <button class="bg-blue-600 text-white h-10 borde sm:w-full rounded-lg md:w-1/3 lg:w-1/6">
            Boton
        </button>
    </div>

Segundo reto

    <div class="m-4 flex justify-center">
        <button class=" bg-green-500 hover:bg-green-900 hover:text-white px-4 py-1">Boton 1</button>
        <button class=" bg-teal-500 hover:bg-teal-900 hover:text-white px-4 py-1">Boton 2 </button>
        <button class=" bg-red-500 hover:bg-red-900 hover:text-white px-4 py-1">Boton 3</button>
    </div>

Tercer reto

.alert{
    @apply bg-red-500;
    @apply text-black;
    @apply m-4;
    @apply p-4;
    @apply rounded-l;
    @apply w-64;
}

.alert-danger{
    @apply bg-red-700 ;
    @apply text-white;
}

.alert-warning{
    @apply bg-yellow-500;
}

.alert-info{
    @apply bg-blue-700;
    @apply  text-white;
}

Reto cumplido.
1.- Colores y dimensiones

 <button class="hover:bg-blue-800 hover:text-blue-100 my-2 mx-2 font-bold bg-blue-300 w-full md:w-1/3 text-blue-800 text-lg">Boton 1</button>

2.- Flexbox

<div class="my-16 flex flex-col md:flex-row">
            <button class="hover:bg-blue-800 hover:text-blue-100 my-2 mx-2 font-bold bg-blue-300 w-full md:w-1/3 text-blue-800 text-lg">Boton 1</button>
            <button class="hover:bg-red-800 hover:text-red-100 my-2 mx-2 font-bold bg-red-300 w-full md:w-1/3 text-red-800 text-lg">Boton 2</button>
            <button class="hover:bg-green-800 hover:text-green-100 my-2 mx-2 font-bold bg-green-300 w-full md:w-1/3 text-green-800 text-lg">Boton 3</button>
        </div>

3.-PSeudo Class Variants

hover:bg-blue-800 hover:text-blue-10

4.- Apply

@tailwind base;

@tailwind components;

.alert{
    @apply bg-green-700 px-8 py-2 m-4 text-green-100 inline-block;
}
.alert-danger{
    @apply bg-red-700 px-8 py-2 m-4 text-red-100 inline-block;
}
.alert-warning{
    @apply bg-yellow-700 px-8 py-2 m-4 text-yellow-100 inline-block;
}
.alert-info{
    @apply bg-blue-700 px-8 py-2 m-4 text-blue-100 inline-block;
}
@tailwind utilities;

My final code:

<div class="container mx-auto mt-16">
        <h3 class="font-bold text-center">Buttons.</h3>
        <div class="flex justify-center">
            <button class="sm:w-full md:w-1/6 mx-2 hover:bg-blue-900 hover:text-blue-100 bg-blue-400 text-blue-900">Btn-1</button>
            <button class="sm:w-full md:w-1/6 mx-2 hover:bg-green-900 hover:text-green-100 bg-green-400 text-green-900">Btn-2</button>
            <button class="sm:w-full md:w-1/6 mx-2 hover:bg-yellow-900 hover:text-yellow-100 bg-yellow-400 text-yellow-900">Btn-3</button>
        </div>
    </div>
    <div class="container mx-auto mt-16">
        <h3 class="text-center font-bold">Alerts</h3>
        <div class="flex justify-center">
            <div class="alert hover:bg-gray-600 hover:text-black">Alert Default</div>
            <div class="alert alert-danger hover:bg-red-900 hover:text-white">Alert Danger</div>
            <div class="alert alert-warning hover:bg-yellow-900 hover:text-white">Alert Warning</div>
            <div class="alert alert-info hover:bg-blue-900 hover:text-white">Alert Info</div>
        </div>
    </div>```

Reto solucionado

<!DOCTYPE html>
<html lang=“es”>
<head>
<meta charset=“UTF-8”>
<title>Practica Tailwind</title>
<link rel=“stylesheet” href=“css/style.css”>
</head>
<body>
<section id=“ejercicio1”>
<div class=“flex font-semibold”>
<h2 class=“mx-auto mt-8”>Ejercicio 1 Colores y dimensiones</h2>
</div>
<div class=“flex flex-wrap h-64 items-start”>
<button class=“w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 h-32 m-16 mx-auto bg-blue-500 text-blue-900”>
Enviar
</button>
</div>
</section>
<section id=“ejercicio2”>
<div class=“flex”>
<h2 class=“mx-auto font-semibold”>Ejercicio 2 y 3 Display y flexbox Pseudo class</h2>
</div>
<div class=“flex justify-center”>
<button class=“bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 mt-8 rounded-l”>
Prev
</button>
<button class=“bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 mt-8 rounded-r”>
Next
</button>
<button class=“bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 mt-8 rounded-r”>
Cancel
</button>
</div>
</section>
<section>
<div class=“flex justify-center pt-4”>
<h2 class=“font-semibold”>Ejercicio 4 Componentes @Apply</h2>
</div>
<div class="">
<div class=“alert”>
Este mensaje es una alerta default.
</div>
<div class=“alert-danger”>
Este mensaje es una alerta danger.
</div>
<div class=“alert-warning”>
Este mensaje es una alerta warning.
</div>
<div class=“alert-info”>
Este mensaje es una alerta info.
</div>
</div>
</section>
</body>
</html>

@tailwind base;

@tailwind components;

.alert{
@apply bg-red-500;
@apply text-black;
@apply m-4;
@apply p-4;
@apply rounded-l;
@apply w-64;
}

.alert-danger{
@apply bg-red-700 ;
@apply text-red-200;
}

.alert-warning{
@apply bg-yellow-500;
}

.alert-info{
@apply bg-blue-700;
@apply text-white;
}

@tailwind utilities;

Tailwind me ha gustado, es flexible y elegante! Acá está mi práctica.

<h1 class="font-mono text-xl text-gray-800 text-center uppercase">Práctica</h1>
    <div class="mb-4 p-2">
        <h1 class="font-bold font-mono tracking-tight">Colores y dimensiones</h1><br/>
        <button class="bg-blue-800 text-blue-100 rounded p-2 sm:w-full md:w-1/6">Se adapta</button>
    </div>
    <div class="mb-4 p-2">
        <h1 class="font-bold font-mono tracking-tight">Gruop button con Flex y Pseudo class</h1><br/>
        <div class="flex flex-wrap bg-indigo-200 p-1 mt-1">
            <button class="p-1 rounded-l bg-teal-900 w-2/12 text-teal-100">Default</button>
            <button class="hover:bg-teal-400 p-1 bg-teal-500 w-2/12 text-teal-100">Hover</button>
            <button class="active:bg-teal-800 p-1 rounded-r bg-teal-700 w-2/12 text-teal-100">Active</button>
            
        </div>
    </div>
    <div class="mb-4 p-2">
        <h1 class="font-bold font-mono tracking-tight">Directiva @apply </h1><br/>
        <div class="flex flex-col p-2 mt-1">
            <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>
    </div>

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/Development/style.css">
  <title>Reto</title>
</head>
<body class="m-0 h-screen w-screen flex justify-center items-center flex-col ">

  <button class="bg-teal-500 hover:bg-teal-700 text-teal-700
  hover:text-teal-900 font-bold py-2 px-4 border border-blue-700  m-2">
    Button
  </button>
  
  <hr></hr>
  
  <button class="bg-teal-500 hover:bg-teal-700 text-teal-700
  hover:text-teal-900 font-bold py-2 px-4 border border-blue-700 rounded m-2 w-screen md:w-1/2 ld:w-1/6 xl:w-24">
    Button
  </button>

  <hr></hr>

  <div class="inline-flex">
    <button class="bg-indigo-500 hover:bg-indigo-700 hover:text-gray-400 text-gray-800 font-bold py-2 px-4 mx-4 rounded-l">
      Prev:
      <small>hover</small>
    </button>
    <button class="bg-purple-500 active:bg-purple-700 active:text-purple-400 text-gray-800 font-bold py-2 px-4 mx-4">
      center:
      <small>active</small>
    </button>
    <button class="bg-pink-500 hover:bg-pink-700 hover:text-gray-400 text-gray-800 font-bold py-2 px-4 mx-4 rounded-r">
      Next:
      <small>hover</small>
    </button>
  </div>

  <div class="flex flex-col">
    <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 class="alert alert-success">
      Este mensaje es una alerta success.
    </div>
    
  </div>
</body>
</html>

tailwind.css

@tailwind base;

@tailwind components;

.alert{
  @apply w-auto;
  @apply h-auto;
  @apply m-4;
  @apply p-2;
  @apply text-center;
}

.alert-default{
  @apply border-t-4;
  @apply border-gray-500;
  @apply bg-gray-300;
  @apply text-gray-800;
}

.alert-danger{
  @apply border-t-4;
  @apply border-red-500;
  @apply bg-red-300;
  @apply text-red-800;
}

.alert-warning{
  @apply border-t-4;
  @apply border-yellow-500;
  @apply bg-yellow-300;
  @apply text-yellow-800;
}
.alert-info{
  @apply border-t-4;
  @apply border-blue-500;
  @apply bg-blue-300;
  @apply text-blue-800;
}
.alert-success{
  @apply border-t-4;
  @apply border-teal-500;
  @apply bg-teal-300;
  @apply text-teal-800;
}

@tailwind utilities;

tailwind.config.js

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'active'],
    textColor: ['responsive', 'hover', 'focus', 'active'],
  },
  plugins: [],
}

reto cumplido.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>
<body class=" bg-blue-300">
    <!-- Primer reto -->
    <div class="my-10">
        <button class="bg-blue-900 px-6 text-white borde h-12 rounded-lg sm:w-full md:w-1/2">
            Boton
        </button>
    </div>
    <!-- Segundo reto -->
    <div class="m-4 flex justify-center">
        <button class=" bg-orange-500 border-solid border-red-700 mx-4 rounded-lg hover:bg-orange-700 hover:text-white px-6 py-3">Boton 1</button>
        <button class=" bg-green-500 mx-4 rounded-lg hover:bg-green-700 hover:text-white px-6 py-3">Boton 2 </button>
        <button class=" bg-blue-500 mx-4 rounded-lg hover:bg-blue-700 hover:text-white px-6 py-3">Boton 3</button>
    </div>
    <!-- Tercer reto -->
<div class="flex flex-col">
    <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>
</body>
</html>

En el tailwindconfig.js se puso el siguiente codigo para las alertas:
variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'active'],
    textoColor: ['responsive', 'hover', 'focus', 'active'],
},

Me tomo un tiempo pero lo logré! Así quedó:

Reto1:

Reto2:


Reto2:

Reto 1:

<button class="px-4 py-2 bg-blue-400 text-blue-900 text-white w-full md:w-auto font-bold">
	Boton
</button>

Reto 2:

<div class="h-16 bg-gray-500 w-auto inline-block rounded-lg">
	<button class="h-full px-4 rounded-lg rounded-r-none hover:bg-gray-800">Button 1</button>
	<button class="h-full px-4 hover:bg-gray-800">Button 2</button>
	<button class="h-full px-4 rounded-lg rounded-l-none hover:bg-gray-800">Button 3</button>
</div>

Reto 3:

.alert {
	@apply w-full mt-2 mb-2 px-4 py-4;
	@apply border-2 rounded-lg;
	@apply border-gray-800 bg-gray-400 text-gray-800;
}

.alert-danger {
	@apply border-red-800 bg-red-300 text-red-900;
}

.alert-warning {
	@apply border-orange-800 bg-orange-300 text-orange-900;
}

.alert-info {
	@apply border-blue-800 bg-blue-300 text-blue-900;
}

Retos completados.

<div class="container bg-blue-700">
        <div class="w-full p-8 text-center">
          <h1 class="uppercase mb-8 text-4xl">primer reto</h1>
          <button class="w-full md:w-auto bg-green-300 px-4  py-1 ">button</button>
        </div>
      </div>
      <div class="w-full flex justify-center h-auto py-16">
        <button class="bg-green-400 px-4  py-1 hover:bg-green-800 hover:text-white mx-3 rounded-lg ">boton 1</button>
        <button class="bg-green-400 px-4  py-1 hover:bg-green-800 hover:text-white mx-3 rounded-lg ">boton 2</button>
        <button  class="bg-green-400 px-4  py-1 hover:bg-green-800 hover:text-white mx-3 rounded-lg ">boton 3</button>
      </div>
      <div class="w-full lg:flex sm:block">
        <button class="alert lg:w-auto h-auto">NEUTRAL</button>
        <button class="alert-danger md:bg-green-400 lg:w-auto h-auto">ALERT DANGER</button>
        <button class="alert-info lg:w-auto h-auto">ALERT INFO</button>


      </div>

creo que perdi bastante tiempo en descubrir aue despues de poner @apply tienes que correr en la consola npm run build 😅

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body class="mx-4">

  <h1 class="font-sans text-center text-4xl tracking-wider ">RETOS 🧑‍💻</h1>
  <h1 class="font-sans text-center text-4xl tracking-wider mt-20">RETO #1 🌚</h1>
  <div class="flex text-center justify-center mt-8">
    <button class="mt-4 bg-blue-500 rounded-md h-10 w-full  text-white mr-auto ml-auto md:w-40">META</button>
  </div>
  <h1 class="font-sans text-center text-4xl tracking-wider mt-20">RETO #2 🌝</h1>
  <div class="flex text-center md:justify-center flex-wrap mt-8">
    <button class="mt-4 bg-blue-400 hover:bg-blue-600 rounded-md h-10 w-full  text-white mr-auto ml-auto md:w-40">META</button>
    <button class="mt-4 bg-red-400 hover:bg-red-600 rounded-md h-10 w-full  text-white mr-auto ml-auto md:w-40">META 2</button>
    <button class="mt-4 bg-green-400 hover:bg-green-600 rounded-md h-10 w-full  text-white mr-auto ml-auto md:w-40">META 3</button>
  </div>
  <h1 class="font-sans text-center text-4xl tracking-wider mt-20">RETO #3 😌</h1>
  <div class="alert alert-default">
  Something seriously bad happened.
  </div>
  <div class="alert alert-error">
  Something seriously bad happened.
  </div>
  <div class="alert alert-warning">
  Something seriously strange happened.
  </div>
  <div class="alert alert-success">
  Something seriously good happened.
  </div>
  <div class="alert alert-info">
  Something seriously happened.
  </div>
</body>

</html>
.alert {
  @apply w-auto h-auto my-4 py-4 px-8 rounded relative border-solid border-4;
}

.alert-default {
  @apply bg-gray-200 border-gray-400 text-gray-700;
}
.alert-error {
  @apply bg-red-200 border-red-400 text-red-700;
}
.alert-warning {
  @apply bg-yellow-200 border-yellow-400 text-yellow-700;
}
.alert-success {
  @apply bg-green-200 border-green-400 text-green-700;
}
.alert-info {
  @apply bg-blue-200 border-blue-400 text-blue-700;
}```

Use @apply to inline any existing utility classes into your own custom CSS.

This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.

.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 text-white;
}
.btn-blue:hover {
  @apply bg-blue-700;
}

Hice una combinacion de los tres ejercicios
Site

Esto fue lo que yo hice:

<!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>Colores</title>
    <link rel="stylesheet" href="./css/style.css">
    <style>
        button{
            color: #100B2D;
        }
    </style>
</head>
<body>
    <button class="bg-blue-500 w-full md:w-48">Hola soy un botón</button>
</body>
</html>
<!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>Flex</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="flex flex-row bg-gray-600 justify-between w-1/3">
        <div class="bg-blue-400 hover:text-white">Soy el div 1</div>
        <div class="bg-red-400 hover:text-white">Soy el div 2</div>
        <div class="bg-yellow-400 hover:text-white">Soy el div 3</div>
    </div>
</body>
</html>
<!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>Alert</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="alert text-white default">Default</div>
    <div class="alert text-white danger">Danger</div>
    <div class="alert warning">Warning</div>
    <div class="alert text-white info">Info</div>
</body>
</html>
.alert{
    margin: 20px;
    font-size: 1.3rem;
    border: 2px solid black;
    border-radius: 10px;
    width: fit-content;
    padding: 10px;
}

.default{
    background-color: green;
}

.danger{
    background-color: red;
}

.warning{
    background-color: yellow;
}

.info{
    background-color: blue;
}

@apply se utiliza cuando un componente puede “heredar” de otro. Aqui dejo la documentación de Apply para que es super detallada y ayuda a entender mejor este concepto.

Gracias a la ayuda de mis compañeros pude crear algo similar pero que pude comprender:

Codigo HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/style.css" />
    <title>Reto</title>
  </head>
  <body>
    <main>
      <h1 class="text-center text-3xl my-10">Retos del Curso</h1>
      <section>
        <button
          class="ml-20 btn bg-blue-600 w-full sm:w-1/2 md:w-2/5 lg:w-1/6 xl:w-7/12 rounded"
        >
          Submit
        </button>
      </section>

      <section class="my-10">
        <h2 class="text-center text-3xl mb-10">Display Flex buttons</h2>
        <div class="flex">
          <button class="btn btn-blue ml-10">Boton 1</button>
          <button class="btn btn-red ml-10">Boton 2</button>
          <button class="btn btn-yellow active:bg-red-500 ml-10">
            Boton 3
          </button>
        </div>
      </section>
      <section>
        <h2 class="text-center text-3xl">Alerts</h2>
        <div class="w-100 ml-5">
          <div class="alert alert-neutro">Esta es una alerta por default</div>
          <div class="alert alert-danger">Este mensaje es un alerta danger</div>
          <div class="alert alert-warning">
            Este mensaje es un alerta warning
          </div>
          <div class="alert alert-info">Este mensaje es un alerta info</div>
        </div>
      </section>
    </main>
  </body>
</html>

Y el CSS style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.zoom {
  transform: scale(2);
}

/* Variantes */
@variants hover {
  .zoom {
    transform: scale(2);
    transition: 2s;
  }
}

/* Responsive */
@responsive {
  .rotate-45 {
    transform: rotate(45deg);
    transition: 2s;
  }
}

/* Reto */
.btn {
  @apply font-bold py-2 px-4 rounded text-lg w-full sm:w-48;
}

.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700 text-white;
}
.btn-red {
  @apply bg-red-500 hover:bg-red-700 text-white;
}
.btn-yellow {
  @apply bg-yellow-500 hover:bg-yellow-700 text-white;
}

.alert {
  @apply py-2 px-4 text-lg text-center rounded border-solid w-full sm:w-80 mb-3;
}

.alert-neutro {
  @apply py-2 px-4 rounded bg-gray-100 text-gray-500 border-gray-300;
}

.alert-danger {
  @apply py-2 px-4 rounded bg-red-100 text-red-500 border-red-300;
}

.alert-warning {
  @apply py-2 px-4 rounded bg-yellow-100 text-yellow-500 border-yellow-300;
}

.alert-info {
  @apply py-2 px-4 rounded bg-blue-100 text-blue-500 border-blue-300;
}


/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;


@responsive {
	.rotate-45 {
		transform: rotate(45deg);
	}	
}


@variants hover {
	.zoom {
		transform: scale(2);
	}
	
}

.btn {
  @apply font-bold py-2 px-4 rounded text-lg w-full sm:w-48 ;
}

.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700 text-white;
}


.alert {
	@apply py-2 px-4 text-lg text-center rounded border-solid w-full sm:w-80 mb-3;
}

.alert-neutro {
	@apply py-2 px-4 rounded bg-gray-100 text-gray-500 border-gray-300;
}

.alert-danger {
	@apply py-2 px-4 rounded bg-red-100 text-red-500 border-red-300;
}

.alert-warning {
	@apply py-2 px-4 rounded bg-yellow-100 text-yellow-500 border-yellow-300;
}

.alert-info {
	@apply py-2 px-4 rounded bg-blue-100 text-blue-500 border-blue-300;
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>Tailwind CSS</title>
		<link href="css/compiled.css" rel="stylesheet" type="text/css" />
		<!-- <link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet" /> -->
	</head>
	<body class="">
		<button class="btn bg-blue-600 w-full sm:w-1/2 md:w-2/5 lg:w-1/6 xl:w-7/12 rounded">
			Sumit
		</button>
		
		<div class="mt-20 flex">
			<button class="btn btn-blue active:bg-green-700">
				Sumit
			</button>
			<button class="btn btn-blue  active:bg-green-700">
				Sumit
			</button>
			<button class="btn active:bg-red-500">
				Sumit
			</button>
		</div>
		
		<div class="mt-20 flex flex-col">
			<div class="alert alert-neutro">
				Este mensaje es una alerta neutra
			</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 warning
			</div>
		</div>
	</body>
</html>