Tidadigi Logo

Tailwind CSS Invert

Lớp invert là một hàm dựng sẵn. Nó dùng để áp dụng filter lên ảnh và đảo ngược màu sắc.

Trong CSS, chúng ta thực hiện điều đó bằng CSS invert() Function.

Các lớp Invert:

  • invert-0: Lớp này biểu thị màu gốc của ảnh.
  • invert: Lớp này biểu thị màu đã đảo ngược so với màu gốc.

Cú pháp:

<element class="filter invert | invert-0">..</element>

Ví dụ:

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-20 space-y-2">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Invert Class</b>
    <div class="grid grid-flow-col text-center mx-44">
        <img class="rounded-lg filter invert" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q.jpg" 
             alt="image">
        <img class="rounded-lg filter invert-0" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q.jpg" 
             alt="image">
        
    </div>
</body>

</html>

Đầu ra:

tailwind-css-invert
Last Updated : 20/07/2025