Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Contrast

Quiz

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>

Print Page