How to set Transition duration in Tailwind CSS ?
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.
Method 1: Install Tailwind via npm
npm init -y
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;
npx tailwindcss init
Note: It is an optional step that is used to create a Tailwind config file.
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.