如何在 Tailwind CSS 中设置过渡持续时间？

在本文中，我们将看到如何在 Tailwind CSS 中设置过渡持续时间。 Tailwind CSS 是一个高度可定制、实用优先的 CSS 框架，我们可以从中使用实用类来构建任何设计。

过渡持续时间类在顺风 CSS 中接受很多值，其中所有属性都以类形式覆盖。 transition-duration类用于指定完成过渡效果的时间长度(以秒或毫秒为单位)。它是 CSS transition-duration 属性的替代品。

为了使用 Tailwind CSS，我们必须将 Tailwind CSS 添加到我们的项目文件夹中。

安装：

方法一：通过 npm 安装 Tailwind

步骤1：

npm init -y

第2步：

npm install tailwindcss

第 3 步：现在我们必须使用@tailwind指令将 Tailwind 的基础、组件和实用程序样式注入到我们的 CSS 文件中，从而将 Tailwind 添加到我们的 CSS 中。

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

第四步：

npx tailwindcss init

注意：这是一个可选步骤，用于创建 Tailwind 配置文件。

第 5 步：

npx tailwindcss build styles.css -o output.css  

方法二：通过 CDN 链接使用 Tailwind

示例：在此示例中，我们使用过渡持续时间类将过渡持续时间设置为 500 毫秒。

HTML

  

    

  

    

        GeeksforGeeks
    
  
    
Tailwind CSS Transition Duration Class
  
    



    
        Hover
    

  

输出：