En este artículo, veremos cómo establecer la duración de la transición en Tailwind CSS . Tailwind CSS es un marco CSS altamente personalizable que prioriza la utilidad desde el cual podemos usar clases de utilidad para construir cualquier diseño.
La clase de duración de transición acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. La clase de duración de transición se utiliza para especificar el tiempo (en segundos o milisegundos) para completar el efecto de transición. Es la alternativa a la propiedad de duración de transición de CSS .
Para trabajar con Tailwind CSS, debemos agregar Tailwind CSS a nuestra carpeta de proyecto.
Instalación:
Método 1: instalar Tailwind a través de npm
Paso 1:
npm init -y
Paso 2:
npm install tailwindcss
Paso 3: ahora tenemos que agregar Tailwind a nuestro CSS usando la directiva @tailwind para inyectar la base, los componentes y los estilos de utilidad de Tailwind en nuestro archivo CSS.
@tailwind base; @tailwind components; @tailwind utilities;
Paso 4:
npx tailwindcss init
Nota: Es un paso opcional que se utiliza para crear un archivo de configuración de Tailwind.
Paso 5:
npx tailwindcss build styles.css -o output.css
Método 2: usar Tailwind a través de un enlace CDN
<enlace href=”https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css” rel=”hoja de estilo”>
Ejemplo: En este ejemplo, hemos utilizado la clase de duración de la transición para establecer la duración de la transición en 500 ms.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <p>Tailwind CSS Transition Duration Class</p> <br><br><br> <button class="text-white bg-green-500 md:border-2 rounded-lg p-5 hover:shadow-inner w-56 text-2xl transform hover:scale-125 hover:bg-green-700 transition ease-out duration-500"> Hover </button> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por archnabhardwaj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA