如何使用 Tailwind CSS 应用具有线性渐变的背景图像？

在本文中，我们将看到如何使用 Tailwind CSS 应用具有线性渐变的背景图像。

Tailwind CSS 是一个高度可定制、实用优先的 CSS 框架，我们可以从中使用实用类来构建任何设计。要应用具有线性渐变的背景图像，我们使用 Tailwind CSS 的背景图像实用程序。它是 CSS background-image属性的替代品。要使用 Tailwind CSS，我们必须将 Tailwind CSS 预编译文件添加到我们的项目文件夹中。

安装：

方法一：通过 npm 安装 Tailwind

Step 1:npm init -y

Step 2:npm install tailwindcss

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

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

第四步：

npx tailwindcss init
(It is an optional step that is used to create a Tailwind config file.)

第 5 步：

npx tailwindcss build styles.css -o output.css  

方法二：通过 CDN 使用 Tailwind CSS 文件

示例：在本示例中，我们使用bg-gradient-to-br类将线性渐变设置为右下角。

HTML

    


    

      

        GeeksforGeeks
      
      

        Tailwind CSS Background Image Class
      
  
    
    

    

输出：

示例：在此示例中，我们使用了所有背景图像类，即. bg-gradient-to-{direction} 。

HTML

    

  

    

    GeeksforGeeks
    
    Tailwind CSS Background Image Class
    

    

    
    

    
    

    
    

    
    

    
    

    
    

    

输出：