Tailwind CSS Background Color - GeeksforGeeks

Tailwind CSS Background Color

Last Updated : 28 Oct, 2026

Tailwind CSS provides background color utilities to set the background color of an element. These utilities are alternatives to the CSS background-color property and can be used to apply predefined colors, transparent backgrounds, or custom colors

Background Color Classes

  • bg-transparent: Makes the background transparent.
  • bg-current: Sets the background color to the element's current text color.
  • bg-inherit: Inherits the background color from the parent element.
  • bg-black: Sets the background color to black.
  • bg-white: Sets the background color to white.
  • bg-gray-500: Applies a medium gray background.
  • bg-red-500: Applies a red background.
  • bg-blue-500: Applies a blue background.
  • bg-indigo-500: Applies an indigo background.
  • bg-purple-500: Applies a purple background.
  • bg-green-500: Applies a green background.
  • bg-yellow-500: Applies a yellow background.
  • bg-pink-500: Applies a pink background.

Note: Color utilities support different shades, such as 50, 100, 200, through 900 and 950, depending on the color palette. You can also specify opacity using a modifier such as bg-blue-500/50 or use arbitrary values such as bg-[#50d71e].

Syntax

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

Example:

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Background Color</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->

<body class="mx-4 space-y-4 p-4">
    <h1 class="text-center text-3xl font-bold text-green-600">
        GeeksforGeeks
    </h1>

    <h2 class="text-center text-xl font-semibold">
        Tailwind CSS Background Color
    </h2>

    <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
        <p class="rounded bg-transparent p-4 text-black">
            Transparent Background
        </p>

        <p class="rounded bg-current p-4 text-white">
            Current Text Color Background
        </p>

        <p class="rounded bg-white p-4 text-black ring-1 ring-gray-300">
            White Background
        </p>

        <p class="rounded bg-black p-4 text-white">
            Black Background
        </p>

        <p class="rounded bg-gray-500 p-4 text-white">
            Gray Background
        </p>

        <p class="rounded bg-red-500 p-4 text-white">
            Red Background
        </p>

        <p class="rounded bg-indigo-500 p-4 text-white">
            Indigo Background
        </p>

        <p class="rounded bg-blue-500 p-4 text-white">
            Blue Background
        </p>

        <p class="rounded bg-green-500 p-4 text-white">
            Green Background
        </p>

        <p class="rounded bg-yellow-400 p-4 text-black">
            Yellow Background
        </p>

        <p class="rounded bg-pink-500 p-4 text-white">
            Pink Background
        </p>

        <p class="rounded bg-purple-500 p-4 text-white">
            Purple Background
        </p>
    </div>
</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
Comment

Explore