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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="text-center mx-4 space-y-2"
class="text-gray-600 text-2xl font-semibold"
MrExamples
class="font-semibold my-2"Brightness Class in Tailwind CSS
class="grid grid-rows-2 grid-flow-col text-start p-4 bg-gray-300 rounded-md"
class="my-2"
brightness-0
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"
class="my-2"
brightness-75
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"
class="my-2"
brightness-95
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"
class="my-2"
brightness-105
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"
class="my-2"
brightness-125
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"
class="my-2"
brightness-200
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"
The remaining brightness classes are covered in the example below:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="text-center mx-4 space-y-2"
class="text-gray-600 text-2xl font-semibold"
MrExamples
class="font-semibold my-2"Brightness Class in Tailwind CSS
class="grid grid-rows-2 grid-flow-col text-start p-4 bg-gray-300 rounded-md"
class="my-2"
brightness-50
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"
class="my-2"
brightness-90
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"
class="my-2"
brightness-100
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"
class="my-2"
brightness-110
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"
class="my-2"
brightness-150
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"
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
