Tailwind CSS - Hue Rotate

Previous
Quiz
Next

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

Tailwind CSS Hue Rotate Classes

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

Class CSS Properties
hue-rotate-0 filter: hue-rotate(0deg);
hue-rotate-15 filter: hue-rotate(15deg);
hue-rotate-30 filter: hue-rotate(30deg);
hue-rotate-60 filter: hue-rotate(60deg);
hue-rotate-90 filter: hue-rotate(90deg);
hue-rotate-180 filter: hue-rotate(180deg);

Functionality of Tailwind CSS Hue Rotate Classes

  • hue-rotate-0: This class is used to remove the hue rotate filter from an element.
  • hue-rotate-15: This class is used to rotate hue to 15deg of an element.
  • hue-rotate-30: This class is used to rotate hue to 30deg of an element.
  • hue-rotate-60: This class is used to rotate hue to 60deg of an element.
  • hue-rotate-90: This class is used to rotate hue to 90deg of an element.
  • hue-rotate-180: This class is used to rotate hue to 180deg of an element.

Tailwind CSS Hue Rotate Classes Example

The following example will illustrate the different visibility and utilities of Tailwind CSS Hue Rotate 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 Hue Rotate Classes
    </h2>
    <div class="flex gap-3 flex-wrap">
        <div>
            <h3 class="text-lg">hue-rotate-0</h3>
            <img class="hue-rotate-0 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">hue-rotate-15</h3>
            <img class="hue-rotate-15 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">hue-rotate-30</h3>
            <img class="hue-rotate-30 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">hue-rotate-60</h3>
            <img class="hue-rotate-60 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">hue-rotate-90</h3>
            <img class="hue-rotate-90 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">hue-rotate-180</h3>
            <img class="hue-rotate-180 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
    </div>
</body>

</html>
Print Page
Previous
Next