Agregando animaciones al proyecto

Lo de las variantes no es necesario si se usa la v3

Usando la versión 3 de Tailwind
Si alguno tuvo problemas para generar la transición de la barra de búsqueda, lo único que tienen que hacer es agregarle un ancho, nada más.
Pueden darse cuenta que el ancho que agregué es w-48 en el input, después de eso el código que puso la profesora no tiene ningún cambio, al parecer si el input no tiene un ancho inicial la transición que coloquemos no hará efecto, si alguien tiene una mejor explicación me gustaría que la deje abajo

<div class="w-full h-full flex flex-col absolute space-y-96 py-4 items-center ">
	<input class="w-48 outline-none p-3 rounded-full shadow-sm transition-all duration-300 focus-within:shadow-sm focus:ring-2 focus:w-10/12" placeholder="San Francisco" type="search" id="">
</div>

Clases de Tailwind y sus equivalentes en propiedad CSS para animaciones:

• transition-none → transition-property: none;
• transition-all → transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
• transition → transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
• transition-colors → transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; **transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);** transition-duration: 150ms;
• transition-opacity → transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
• transition-shadow → transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
• transition-transform → transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;

–
Animaciones aplicadas a home en archivo index.html:

        <div id="home">
            <div class="w-full h-3/4">
                <div class="w-full h-full flex flex-col absolute space-y-96 py-4 items-center ">
                    <input type="search" class="outline-none p-3 rounded-full shadow-sm transition duration-300 focus-within:shadow-sm focus:ring-2 focus:w-11/12" placeholder="San Francisco" name="" id="">
                    <button class="w-48 rounded-full text-lg text-primary shadow-sm font-semibold p-4 bg-white transition transition-all duration-500 ease-in-out hover:bg-primary hover:text-white transform hover:-translate-y-1 hover:scale-110">Explorar</button>
                </div>
                <div class="w-full h-full">
                    <img src="./img/sanFrancisco.jpg" alt="San Francisco City">
                </div>
            </div>
        </div>
       

–
Archivo src/css/tailwind.css (importante hacer build al guardar cambios):

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

.Card {
    @apply w-48 h-64 shadow-md rounded-lg flex-none transform transition-all hover:-translate-y-4 hover:shadow-xl
}

–
Archivo tailwind.config.js (importante hacer build al guardar cambios):

module.exports = {
  content: ["./public/index.html", "./src/**/*.{html,js}"],
  theme: {
    extend: {
      backgroundImage: {
        sanFrancisco: "url('../img/sanFrancisco.jpg')",
        sanFranciscoDesktop: "url('../img/sanFranciscoDesktop.jpg')",
        yosemite: "url('../img/yosemite.jpg')",
        LA: "url('../img/LA.jpg')",
        seattle: "url('../img/seattle.jpg')",
        new_york: "url('../img/new_york.jpg')",
        norway: "url('../img/norway.jpg')",
        sydney: "url('../img/sydney.jpg')",
        miami: "url('../img/miami.jpg')",
        switzerland: "url('../img/switzerland.jpg')",
        bali: "url('../img/bali.jpg')",
        norway: "url('../img/norway.jpg')",
        chicago: "url('../img/chicago.jpg')",
        europe: "url('../img/europe.jpg')",
        iceland: "url('../img/iceland.jpg')",
      },
      backgroundColor: (theme) => ({
        ...theme("colors"),
        primary: "#CC2D4A",
        secondary: "#8FA206",
        terciary: "#61AEC9",
      }),
      textColor: {
        primary: "#CC2D4A",
        secondary: "#8FA206",
        terciary: "#61AEC9",
      },
      fontFamily: {
        Montserrat: ["Montserrat", "sans-serif"],
      },
    },
  },
  variants: {
    width: ["responsive", "hover", "focus"],
    extend: {},
  },
  plugins: [],
};

Por favor a todos los devs y profesores que usen visual studio code presionen “ALT + Z” (Terminal: Toggle Size to Content Width) si el código en horizontal es muy largo sobretodo al momento de grabar videos. Es algo incomodo verlos moviendo la pantalla de izquiera a derecha y viceversa cortando el código en pantalla.

Si queremos que el focus (concretamente el ring) sea acorde al diseño de nuestra página, lo podemos personalizar añadiendo en la configuración de tailwind:

ringColor:{
	'primary': '#CC2D4A',
	'secondary': '#8FA206',
	'tertiary': '#61AEC9',
},

Ahora ya podemos usar por ejemplo focus:ring-secondary 🎉

En la versión 3 de Tailwind no hace falta transition-all
basta con transition

En el botón queda así

transition duration-500 ease-in-out hover:bg-primary hover:text-white transform hover:-translate-y-1 hover:scale-110 text-2xl text-primary bg-white font-semibold rounded-full w-auto p-4 shadow-xl

Yo cuando al querer animar el input no me sale la transition duration-300 y queda saltando de un extremo al otro! Tal vez pocos se dieron cuenta…

Y encima a la profe tampoco le salío.

Con la versión 3 de Tailwind. Queda de la siguiente forma animación sobre el botón.

transition duration-500 ease-in-out hover:bg-primary hover:text-white  hover:-translate-y-1 hover:scale-110

Para que la transición sea válida en el Search Box, yo usé transition-all.
Código:

class="transition-all ease-in-out duration-300 focus:w-11/12"

Plugin: Inline fold (VS Code)
Permite colapsar las clases tan extensas de Tailwind
URL: https://marketplace.visualstudio.com/items?itemName=moalamri.inline-fold

Les dejo mi condigo con el que me funciono que la barra de búsqueda tuviera la animación de crecer lentamente.

<input class="w-1/2 placeholder:text-slate-400 outline-none p-3 rounded-full shadow-sm transition-all ease-in-out duration-300 focus-within:shadow-sm focus:ring-2 focus:w-11/12" placeholder="San Francisco" type="search">

La Transición en el INPUT de búsqueda (tailwind 3) me funcionó de la siguiente forma:

class="w-8/12 outline-none p-3 pl-5 rounded-full shadow-sm transition-all duration-300 focus-within:shadow-sm focus:ring-2 focus:w-10/12"

Parece que el problema de que no funciones, es por no poner un tamaño inicial (ejemplo: w-8/12)

Hola para que la animacion quede mas fluida al input hay que agregar ease-in-out , hover:scale-90 y a duration cambiamos el valor por 700.

<input class="outline-none p-4 rounded-full shadow-lg transition duration-700  ease-in-out focus:whithin:shadow-sm focus:ring-2 focus:w-11/12 hover:scale-90" type="search" placeholder="San Francisco" name="" id="">

LINK DE LA SECCIÓN DE >>> Transition Property
https://v2.tailwindcss.com/docs/transition-property

En éste video veo que es importante cuidar los espacios, nos pueden causar errores, para ver los espacios como lo tiene la profe es necesario en VS Code entrar a Settings, buscan editor.renderWhitespace y lo ponen en “all”.

Si les gusta modificar el json de settings igual:

"editor.renderWhitespace": "all", 

Saludos.

Aveces me confundo y termino poniendo estilos en el placeholder o en el type JAKAJA

Errores como estos es por que esta mal escrito el codigo.
😄
The transtion-all class does not exist. If transtion-all is a custom class, make sure it is defined within a @layer directive.

El código del input.

<input class="outline-none p-3 rounded-full shadow-sm transition duration-300 focus-within:shadow-sm focus:ring-2 focus:w-11/12" placeholder=" San Francisco" type="search" name="" id="">

El codigo del button con la transition:

 <button class="text-xl text-primary font-semibold p-4 w-36 rounded-full bg-white transition transition-all ease-in-out delay-150 hover:bg-primary hover:text-white hover:-translate-y-1 hover:scale-110 duration-300">Explorar</button>

Al final así quedó con la v3 de tailwind

<input class="w-6/12 text-center rounded-full outline-none p-3 shadow-sm transition-all ease-in-out duration-500 focus-within:shadow-sm focus:ring-2 transform focus:w-11/12" type="search" placeholder="San Francisco">

<button class="w-auto rounded-full text-xl text-primary font-semibold p-4 bg-white transition-all duration-500 ease-in-out hover:bg-primary hover:text-white transform hover:translate-y-1 hover:scale-110">
	Explore More 
</button>

Como animar el width según la documentación. Cabe mencionar que no es buena práctica animar propiedades fuera del transform y opacity

a mi no me funciona lo de width: hover, focus, la verdad he probado de todo y no se porque pueda ser porque las demas propiedades del config si me las lee (los colores y las fonts) pero esas no, he mirado en la documentation y copiado tal cual pero ese focus con el width sigue sin funcionar 😦

P.D: Si he hecho el npm run tw:build, no es un problema de eso tampoco 😭