How to set Transition duration in Tailwind CSS ?
Last Updated :
01 Jun, 2021
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 =
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:
Share your thoughts in the comments
Please Login to comment...