Tidadigi Logo

Tailwind CSS Sepia

Lớp `sepia` là một lớp dựng sẵn dùng để áp dụng bộ lọc cho ảnh. Nó chuyển đổi hình ảnh thành tông màu nâu đỏ. Trong CSS, chúng ta làm điều đó bằng CSS sepia() Function. Tailwind CSS đã thêm tính năng `brightness` mới trong phiên bản 2.1.

Sepia:

  • sepia-0: Lớp này dùng để thể hiện ảnh gốc ban đầu.
  • sepia: Lớp này dùng để thể hiện ảnh sau khi đã áp dụng hiệu ứng sepia.

Syntax:

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

</html>

Output:

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