Backdrop Hue Rotate In Tailwind CSS
In this article, we will explore the use of Tailwind Backdrop Hue Rotate class with examples. With Tailwind, developers can use the Backdrop Hue Rotate class across all web browsers.
Tailwind Backdrop Hue Rotate
An inbuilt function, Tailwind Backdrop hue rotate, applies a filter to an image to set the hue rotation.
Backdrop Hue Rotate is part of the Backdrop Filter module, which is a new module that not all browsers support yet. Tailwind CSS added this feature in version 2.1.
Hue rotation specifies the angle around the color circle by which the input samples are adjusted.
Syntax:
<element class="filter backdrop-hue-rotate-{amount}"> </element>
Tailwind Backdrop Hue Rotate values
- -backdrop-hue-rotate-180 : Using this class, an element can be set to CSS hue-rotate(-180).
- -backdrop-hue-rotate-90 : Using this class, an element can be set to CSS hue-rotate(-90).
- -backdrop-hue-rotate-60 : Using this class, an element can be set to CSS hue-rotate(-60).
- -backdrop-hue-rotate-30 : Using this class, an element can be set to CSS hue-rotate(-30).
- -backdrop-hue-rotate-15 : Using this class, an element can be set to CSS hue-rotate(-15).
- backdrop-hue-rotate-0 : Using this class, an element can be set to CSS hue-rotate(0).
- backdrop-hue-rotate-15 : Using this class, an element can be set to CSS hue-rotate(15).
- backdrop-hue-rotate-30 : Using this class, an element can be set to CSS hue-rotate(30).
- backdrop-hue-rotate-60 : Using this class, an element can be set to CSS hue-rotate(60).
- backdrop-hue-rotate-90 : Using this class, an element can be set to CSS hue-rotate(90).
- backdrop-hue-rotate-180 : Using this class, an element can be set to CSS hue-rotate(180).
Example: 
Example Explanation
- The script tag in the head section includes the Tailwind CSS library from a CDN.
- The code defines a div element with a class of mx-16 mt-18 h-36 relative that contains an image and three more div elements.
- The image is loaded from a URL specified in the src attribute.
- The image is contained in an absolutely positioned div with a class of absolute w-full h-full py-18.
- The remaining div elements are horizontally scrollable and use Tailwind CSS classes to apply a backdrop filter with a hue rotation effect to the image.
- The div elements have different hue rotation values and display their values as text.