Tailwind CSS Backgrounds Complete Reference
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Background, In which all the properties are covered in this class. it is controlling the background portion of the page like a background Image that can set one or more background images to element, background-clip, background color, background opacity, etc.,
Below example will give you a brief idea about the Backgrounds of Tailwind CSS:
Example:
HTML
<!DOCTYPE html>
< head >
< link href =
rel = "stylesheet" >
</ head >
< body class = "text-center mx-4 space-y-2" >
< h1 class = "text-green-600 text-5xl font-bold" >
GeeksforGeeks
</ h1 >
< b >Tailwind CSS
< span class="bg-clip-text text-lg text-transparent
bg-gradient-to-r
from-green-400 to-blue-500">
Background Clip Class
</ span >
</ b >
< div class = "mx-2 grid grid-cols-3 gap-2 bg-green-200 rounded-lg" >
< div class="bg-clip-border p-6 bg-green-600 border-dashed
border-4 border-green-300">
</ div >
< div class="bg-clip-padding p-6 bg-green-600 border-dashed
border-4 border-green-300">
</ div >
< div class="bg-clip-content p-6 bg-green-600 border-dashed
border-4 border-green-300">
</ div >
</ div >
</ body >
</ html >
|
Output:
Tailwind CSS Backgrounds
Last Updated :
04 Aug, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...