Skip to content
Related Articles

Related Articles

Tailwind CSS Backgrounds Complete Reference

View Discussion
Improve Article
Save Article
  • Last Updated : 28 Mar, 2022

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=
"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

Tailwind CSS Backgrounds 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!