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.,
- Tailwind CSS Background Image
- Tailwind CSS Background Clip
- Tailwind CSS Background Color
- Tailwind CSS Background Opacity
- Tailwind CSS Background Position
- Tailwind CSS Background Repeat
- Tailwind CSS Background Size
- Tailwind CSS Gradient Color Stops
Below example will give you a brief idea about the Backgrounds of Tailwind CSS:
Example:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 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
Please Login to comment...