Open In App

Tailwind CSS Background Color

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

This class accepts more than one value in tailwind CSS in which all the properties are covered in class form. It is the alternative to the CSS background-color property. This class is used to specify the background color of an element. The background covers the total size of the element with padding and border but excluding margin. It makes the text so easy to read for the user.

Background Color classes:

  • background-transparent: The background color will be transparent.
  • background-current:  The background will color depend on the parent element color.
  • background-black: The background color will be black.
  • background-white: The background color will be white.
  • background-gray-50: The background color will be gray.
  • background-red-50: The background color will be red.
  • background-blue-50: The background color will be blue.
  • background-indigo-50: The background color will be indigo.
  • background-purple-50: The background color will be purple.
  • background-green-50: The background color will be green.
  • background-yellow-50: The background color will be yellow.
  • background-pink-50: The background color will be pink.

Note: The color’s values can be changeable according to your need from 50-900, the span should be 100, after the 100.

Syntax:

<element class="background-{color}">...</element>

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 Background Color Class</b
    <div class="mx-14 bg-green-200 grid grid-rows-4
                grid-flow-col text-justify p-4">
          
       <p class="bg-transparent p-2">
         A Computer Science Portal for Geeks
       </p>
  
  
       <p class="bg-current text-red-600 p-2">
         A Computer Science Portal for Geeks
       </p>
  
       <p class="bg-white p-2">
         A Computer Science Portal for Geeks
       </p>
  
       <p class="bg-black text-white p-2">
         A Computer Science Portal for Geeks
       </p>
  
       <p class="bg-gray-700 p-2">
         A Computer Science Portal for Geeks
       </p>
  
       <p class="bg-red-700 p-2">
         A Computer Science Portal for Geeks
       </p>
  
  
       <p class="bg-indigo-700 p-2">
         A Computer Science Portal for Geeks
       </p>
  
       <p class="bg-blue-700 p-2">
         A Computer Science Portal for Geeks
       </p>
  
       <p class="bg-green-700 p-2">
         A Computer Science Portal for Geeks
       </p>
  
       <p class="bg-yellow-700 p-2">
         A Computer Science Portal for Geeks
       </p>
  
       <p class="bg-pink-700 p-2">
         A Computer Science Portal for Geeks
       </p>
  
       <p class="bg-purple-700 p-2">
         A Computer Science Portal for Geeks
       </p>
  
    </div>
</body
  
</html


Output:

Background color class



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads