Tailwind CSS Letter Spacing

Class này chấp nhận nhiều giá trị trong tailwind CSS, bao gồm tất cả các thuộc tính ở dạng class. Nó là một giải pháp thay thế cho CSS letter-spacing property. Class này dùng để thiết lập khoảng cách giữa các ký tự, tăng hoặc giảm khoảng trống.

Các class Letter Spacing:

  • tracking-tighter: tracking-tighter letter spacing cho không gian bằng không giữa các ký tự. Giá trị sẽ là -0.05em.
  • tracking-tight: tracking-tight letter spacing cho một chút không gian giữa các ký tự. Giá trị là -0.025em.
  • tracking-normal: tracking-normal letter spacing cho font hiện tại, không có thêm khoảng trống. Đây là giá trị mặc định.
  • tracking-wide: tracking-wide letter spacing cho nhiều khoảng trống hơn một chút so với bình thường. Giá trị sẽ là 0.025em.
  • tracking-wider: tracking-wider letter spacing cho nhiều khoảng trống hơn một chút so với wide. Giá trị sẽ là 0.05em.
  • tracking-widest: tracking-widest letter spacing cho nhiều khoảng trống hơn một chút so với wider. Giá trị sẽ là 0.1em.

Cú pháp:

<element class="tracking-{size}">...</element>

Ví dụ:

HTML
<!DOCTYPE html>
<html>

<head>
    <link href="https://unpkg.com/tailwindcss@^1.0/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 Letter Spacing Class</b>

    <div class="mx-24 bg-green-200 text-justify">
        <p class="p-2">tracking-tighter:<br>
            <span class="tracking-tighter">
                A Computer Science portal for Geeks
            </span>
        </p>

        <p class="p-2">tracking-tight:<br>
            <span class="tracking-tight">
                A Computer Science portal for Geeks
            </span>
        </p>

        <p class="p-2">tracking-normal:<br>
            <span class="tracking-normal">
                A Computer Science portal for Geeks
            </span>
        </p>

        <p class="p-2">tracking-wide:<br>
            <span class="tracking-wide">
                A Computer Science portal for Geeks
            </span>
        </p>

        <p class="p-2">tracking-wider:<br>
            <span class="tracking-wider">
                A Computer Science portal for Geeks
            </span>
        </p>

        <p class="p-2">tracking-widest:<br>
            <span class="tracking-widest">
                A Computer Science portal for Geeks
            </span>
        </p>
    </div>
</body>

</html>

Đầu ra:

tailwind-css-letter-spacing
tracking size classes

Last Updated : 20/07/2025