Tailwind CSS Background Color
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
Please Login to comment...