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=
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=
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:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
25 May, 2021
Like Article
Save Article