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>
Advertisements