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

Tailwind CSS - Sepia

Quiz

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

Tailwind CSS Sepia Classes

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

Class	CSS Properties
sepia-0	filter: sepia(0);
sepia	filter: sepia(100%);

Functionality of Tailwind CSS Sepia Classes

sepia-0: This class is used to remove sepia filter from an element.
sepia: This class is used to apply a sepia filter to an element.

Tailwind CSS Sepia Classes Example

The following example will illustrate the different possibilities and utilities of Tailwind CSS Sepia 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 Sepia Classes
    </h2>
    <div class="flex gap-6 flex-wrap">
        <div>
            <h3 class="text-lg font-medium">sepia-0</h3>
            <img class="sepia-0 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg font-medium">sepia</h3>
            <img class="sepia w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
    </div>
</body>
    
</html>

Print Page