Hue Rotate

    Utilities for applying hue-rotate filters to an element.

    Use the utilities to rotate the hue of an element.

    Using negative values

    To use a negative hue-rotate value, prefix the class name with a dash to convert it to a negative value.

    1. <div class="-hue-rotate-60 ...">
    2.   <!-- ... -->
    3. </div>

    This can be useful when you want to remove filters conditionally, such as on hover or at a particular breakpoint.

    Hover, focus, and other states

    Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:hue-rotate-0 to only apply the hue-rotate-0 utility on hover.

    1. <div class="hue-rotate-60 hover:hue-rotate-0">
    2.   <!-- ... -->

    For a complete list of all available state modifiers, check out the documentation.

    You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:hue-rotate-0 to apply the hue-rotate-0 utility at only medium screen sizes and above.

    Customizing your theme

    By default, Tailwind includes a handful of general purpose hue-rotate utilities. You can customize these values by editing theme.hueRotate or theme.extend.hueRotate in your tailwind.config.js file.

    tailwind.config.js

    1.   theme: {
    3.       hueRotate: {
    4.         '-270': '-270deg',
    5.         270: '270deg',
    6.       }
    7.     }
    8.   }

    Learn more about customizing the default theme in the documentation.

    If you need to use a one-off hue-rotate value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.