Tailwind CSS - Contrast


Tailwind CSS Contrast is a utility class used to apply a Contrast filter to an element.

Tailwind CSS Contrast Classes

The following is the list of Tailwind CSS Contrast classes that are used to effectively apply contrast filters.

Class CSS Properties
contrast-0 filter: contrast(0);
contrast-50 filter: contrast(.5);
contrast-75 filter: contrast(.75);
contrast-100 filter: contrast(1);
contrast-125 filter: contrast(1.25);
contrast-150 filter: contrast(1.5);
contrast-200 filter: contrast(2);

Functionality of Tailwind CSS Contrast Classes

  • Contrast-*: Class is used to effectively adjust the contrast of an element. {*} here specifies the different contrast value that can be set as per the need.

Tailwind CSS Contrast Classes Example

The following example will illustrate the different possibilities and utilities of Tailwind CSS Contrast classes.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl mb-3 font-bold">
        Tailwind CSS Contrast Classes
    </h2>
    <div class="flex gap-3 flex-wrap">
        <div>
            <h3 class="text-lg">Contrast-0</h3>
            <img class="contrast-0 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Contrast-50</h3>
            <img class="contrast-50 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Contrast-100</h3>
            <img class="contrast-100 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Contrast-125</h3>
            <img class="contrast-125 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Contrast-150</h3>
            <img class="contrast-150 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Contrast-200</h3>
            <img class="contrast-200 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
    </div>
</body>

</html>