A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso B谩sico de Tailwind

Curso B谩sico de Tailwind

Ana Mar铆a D铆az Solorio

Ana Mar铆a D铆az Solorio

Agregando animaciones al proyecto

18/29
Recursos

Aportes 7

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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

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

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

  • transition-none 鈫 transition-property: none;
  • transition-alltransition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
  • transitiontransition-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-colorstransition-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-opacitytransition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
  • transition-shadowtransition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
  • transition-transformtransition-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: [],
};

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"

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

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.

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