Tidadigi Logo

Tailwind CSS Hue Rotate

Lớp hue rotate là một hàm dựng sẵn, dùng để áp dụng bộ lọc cho ảnh. Bộ lọc này dùng để đặt giá trị hue rotation cho ảnh. Trong CSS, ta dùng CSS hue-rotate() Function để làm việc này. Tailwind CSS đã thêm tính năng brightness mới trong phiên bản 2.1.

Hue Rotate:

  • -hue-rotate-180: Lớp này đặt hue-rotate tương đương với CSS hue-rotate(-180).
  • -hue-rotate-90: Lớp này đặt hue-rotate tương đương với CSS hue-rotate(-90).
  • -hue-rotate-60: Lớp này đặt hue-rotate tương đương với CSS hue-rotate(-60).
  • -hue-rotate-30: Lớp này đặt hue-rotate tương đương với CSS hue-rotate(-30).
  • -hue-rotate-15: Lớp này đặt hue-rotate tương đương với CSS hue-rotate(-15).
  • hue-rotate-0: Lớp này đặt hue-rotate tương đương với CSS hue-rotate(0).
  • hue-rotate-15: Lớp này đặt hue-rotate tương đương với CSS hue-rotate(15).
  • hue-rotate-30: Lớp này đặt hue-rotate tương đương với CSS hue-rotate(30).
  • hue-rotate-60: Lớp này đặt hue-rotate tương đương với CSS hue-rotate(60).
  • hue-rotate-90: Lớp này đặt hue-rotate tương đương với CSS hue-rotate(90).
  • hue-rotate-180: Lớp này đặt hue-rotate tương đương với CSS hue-rotate(180).

Syntax: 

<element class="filter hue-rotate-{amount}">..</element>

Example:

HTML 
<!DOCTYPE html>
<html>
<head>
    <link href=
"https://unpkg.com/tailwindcss@^2.1/dist/tailwind.min.css"
        rel="stylesheet">
</head>

<body class="text-center mx-4 space-y-2">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Hue Rotate Class</b>
    <div class="grid grid-flow-col text-center p-4">
        <img class="rounded-lg filter -hue-rotate-180" 
          src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
             alt="image">
        <img class="rounded-lg filter -hue-rotate-60" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
             alt="image">
        <img class="rounded-lg filter -hue-rotate-0" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
             alt="image">
        <img class="rounded-lg filter hue-rotate-60" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
             alt="image">
        <img class="rounded-lg filter hue-rotate-180" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
             alt="image">
        
    </div>
</body>

</html>

Output:

tailwind-css-hue-rotate
Last Updated : 20/07/2025