Tailwind CSS - Sepia


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>