Skip to content
Related Articles

Related Articles

Tailwind CSS Background Color

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

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!