Brightness In Tailwind CSS
In this article we will take you through a brief overview of Tailwind brightness class with examples.
In Tailwind Css, the brightness class is used to adjust the brightness of an image.
The brightness of an image is adjusted using a linear multiplier which increases or decreases the brightness depending on the value.
In CSS, we achieve this by using the CSS brightness() function.
This feature was introduced in version 2.1 of Tailwind.
Syntax
<element class="filter brightness-{amount}">....</element>Tailwind Brightness Classes
| Classes | Overview |
| brightness-0 | This class applies the same styles as CSS brightness(0). |
| brightness-50 | This class is similar in functionality as CSS brightness(0.5). |
| brightness-75 | The brightness is equivalent to CSS brightness(0.75). |
| brightness-90 | This class used to set the brightness equivalent to CSS brightness(0.9). |
| brightness-95 | This class sets the brightness equal to CSS brightness(0.95). |
| brightness-100 | This is the default value. Equivalent to CSS brightness(1.0). |
| brightness-105 | This class is used to set the brightness of an element. It applies the same styles as CSS brightness(1.05). |
| brightness-110 | Using this class, the brightness is equivalent to CSS brightness(1.10). |
| brightness-125 | This class is similar in functionality as CSS brightness(1.25). |
| brightness-150 | It’s equivalent to CSS brightness(1.50). |
| brightness-200 | Brightness is twice the default value. In normal CSS, it is equal to CSS brightness(2.0). |
Following is an example of how brightness classes are implemented in Tailwind:
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Brightness Class in Tailwind CSS</p>
<div class="grid grid-rows-2 grid-flow-col text-start p-4 bg-gray-300 rounded-md">
<div class="my-2">
<p>brightness-0</p>
<img class="rounded-lg w-24 brightness-0 mt-1" title="brightness-0" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image">
</div>
<div class="my-2">
<p>brightness-75</p>
<img class="rounded-lg w-24 brightness-75 mt-1" title="brightness-75" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image">
</div>
<div class="my-2">
<p>brightness-95</p>
<img class="rounded-lg w-24 brightness-95 mt-1" title="brightness-95" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image">
</div>
<div class="my-2">
<p>brightness-105</p>
<img class="rounded-lg w-24 brightness-105 mt-1" title="brightness-105" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image">
</div>
<div class="my-2">
<p>brightness-125</p>
<img class="rounded-lg w-24 brightness-125 mt-1" title="brightness-125" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image">
</div>
<div class="my-2">
<p>brightness-200</p>
<img class="rounded-lg w-24 brightness-200 mt-1" title="brightness-200" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image">
</div>
</div>
</body>
</html>
The remaining brightness classes are covered in the example below:
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Brightness Class in Tailwind CSS</p>
<div class="grid grid-rows-2 grid-flow-col text-start p-4 bg-gray-300 rounded-md">
<div class="my-2">
<p>brightness-50</p>
<img class="rounded-lg w-24 brightness-50 mt-1" title="brightness-50" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image">
</div>
<div class="my-2">
<p>brightness-90</p>
<img class="rounded-lg w-24 brightness-90 mt-1" title="brightness-90" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image">
</div>
<div class="my-2">
<p>brightness-100</p>
<img class="rounded-lg w-24 brightness-100 mt-1" title="brightness-100" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image">
</div>
<div class="my-2">
<p>brightness-110</p>
<img class="rounded-lg w-24 brightness-110 mt-1" title="brightness-110" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image">
</div>
<div class="my-2">
<p>brightness-150</p>
<img class="rounded-lg w-24 brightness-150 mt-1" title="brightness-150" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image">
</div>
</div>
</body>
</html>
Now that you know what Tailwind brightness is, you can use it to create your own website.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
