Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 25 May, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads