Open In App

How to set Transition duration in Tailwind CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see how to set transition duration in Tailwind CSS. Tailwind CSS is a highly customizable, utility-first CSS framework from which we can use utility classes to build any design. 

Transition duration class accepts lots of value in tailwind CSS in which all the properties are covered in class form. The transition-duration class is used to specify the length of time (in seconds or milliseconds) to complete the transition effect. It is the alternative to the CSS transition-duration property. 

For working with Tailwind CSS, we have to add Tailwind CSS to our project folder.

 

Installation:

Method 1: Install Tailwind via npm

Step 1:

npm init -y

Step 2:

npm install tailwindcss

Step 3: Now we have to add Tailwind to our CSS by using the @tailwind directive to inject Tailwind’s base, components, and utility styles into our CSS file. 

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

Step 4: 

npx tailwindcss init

Note: It is an optional step that is used to create a Tailwind config file.

Step 5:

npx tailwindcss build styles.css -o output.css  

Method 2: Using Tailwind via CDN link

<link href=”https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css” rel=”stylesheet”>

Example: In this example, we have used the transition duration class to set the duration of transition to 500ms.

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>


Output:



Last Updated : 01 Jun, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads