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

Tailwind CSS - Brightness

Quiz

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

Tailwind CSS Brightness Classes

The following is the list of Tailwind CSS Brightness Classes that are used to effectively apply brightness filters.

Class	CSS Properties
brightness-0	filter: brightness(0);
brightness-50	filter: brightness(.5);
brightness-75	filter: brightness(.75);
brightness-90	filter: brightness(.9);
brightness-95	filter: brightness(.95);
brightness-100	filter: brightness(1);
brightness-105	filter: brightness(1.05);
brightness-110	filter: brightness(1.1);
brightness-125	filter: brightness(1.25);
brightness-150	filter: brightness(1.5);
brightness-200	filter: brightness(2);

Functionality of Tailwind CSS Brightness Classes

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

Tailwind CSS Brightness Classes Example

The following example will illustrate the different visibilities and utilities of Tailwind CSS Brightness 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 Brightness Classes
    </h2>
    <div class="flex gap-3 flex-wrap">
        <div>
            <h3 class="text-lg">Brightness-0</h3>
            <img class="brightness-0 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Brightness-50</h3>
            <img class="brightness-50 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Brightness-75</h3>
            <img class="brightness-75 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Brightness-100</h3>
            <img class="brightness-100 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">brightness-125</h3>
            <img class="brightness-125 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">brightness-200</h3>
            <img class="brightness-200 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
    </div>
</body>

</html>

Print Page