How to apply background image with linear gradient using Tailwind CSS ?

25 May, 2021
In this article, we will see how to apply background images with a linear gradient using Tailwind CSS. 
Tailwind CSS is a highly customizable, utility-first CSS framework from which we can use utility classes to build any design. To apply background images with linear gradients we use the background image utility of Tailwind CSS. It is the alternative to the CSS background-image property. To work with Tailwind CSS, we have to add Tailwind CSS pre-compiled file 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
(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 CSS file via CDN
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
Example: In this example, we have used the bg-gradient-to-br class to set the linear gradient to the bottom right.
HTML
<!DOCTYPE html><html><head>    <link href=     "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"           rel="stylesheet"></head><body>    <div class="font-bold m-3">      <h1 class="text-3xl text-green-800 my-4" >        GeeksforGeeks      </h1>      <p class=" text-xl text-black-700 my-3">        Tailwind CSS Background Image Class      </p>      </div>    <div class=" m-4 w-96 h-52 bg-gradient-to-br                    from-blue-400 via-green-500                     to-red-500">    </div></body></html>
Output:
Example: In this example, we have used all background image classes i.e. bg-gradient-to-{direction}.
HTML
<!DOCTYPE html><html><head>    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"    rel="stylesheet"></head>  <body class="text-center">    <h1 class="text-green-600 text-5xl font-bold">    GeeksforGeeks    </h1>    <b>Tailwind CSS Background Image Class</b>    <div class="m-4 grid grid-cols-3 gap-2">    <div class="h-12 w-34 bg-gradient-to-r rounded-lg                 from-blue-400 via-green-500 to-red-500">    </div>    <div class="h-12 w-34 bg-gradient-to-tr rounded-lg                 from-blue-400 via-green-500 to-red-500">    </div>    <div class="h-12 w-34 bg-gradient-to-br rounded-lg                 from-blue-400 via-green-500 to-red-500">    </div>    <div class="h-12 w-34 bg-gradient-to-b rounded-lg                 from-blue-400 via-green-500 to-red-500">    </div>    <div class="h-12 w-34 bg-gradient-to-bl rounded-lg                  from-blue-400 via-green-500 to-red-500">    </div>    <div class="h-12 w-34 bg-gradient-to-tl rounded-lg                 from-blue-400 via-green-500 to-red-500">    </div>    <div class="h-12 w-34 bg-gradient-to-l rounded-lg                  from-blue-400 via-green-500 to-red-500">    </div></body></html>
Output:
Picked
Tailwind CSS
Tailwind CSS-Questions
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a Tribute Page using HTML & CSS
Form validation using jQuery
How to Change the Position of Scrollbar using CSS ?
Build a Survey Form using HTML and CSS
Installation of Node.js on Linux
How to set the default value for an HTML <select> element ?
How do you run JavaScript script through the Terminal?
Node.js fs.readFileSync() Method
How to set space between the flexbox ?