Tidadigi Logo

Tailwind CSS Font Weight

Lớp này chấp nhận nhiều giá trị trong tailwind CSS, nơi tất cả thuộc tính được bao phủ dưới dạng class. Nó là một lựa chọn thay thế cho thuộc tính CSS font-weight. Class này dùng để thiết lập độ đậm hoặc dày của font chữ. Độ đậm áp dụng phụ thuộc vào font-family được sử dụng trong trình duyệt. Ví dụ một số font-family chỉ có sẵn ở độ đậm nhất định.

Các class Font weight:

  • font-thin: Class này thiết lập font-weight thành 100.
  • font-extralight: Class này thiết lập font-weight thành 200.
  • font-light: Class này thiết lập font-weight thành 300.
  • font-normal: Class này thiết lập font-weight thành 400.
  • font-medium: Class này thiết lập font-weight thành 500.
  • font-semibold: Class này thiết lập font-weight thành 600.
  • font-bold: Class này thiết lập font-weight thành 700.
  • font-extrabold: Class này thiết lập font-weight thành 800.
  • font-black: Class này thiết lập font-weight thành 900.

Note: Thay đổi độ đậm trong component với giá trị được đề cập ở trên.

Syntax:

<element class="font-{weight}">...</element>

Example:

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 Font Weight Class</b>

    <div class="mx-24 bg-green-200">
        <p class="p-2 text-justify">
            font-thin:
            <span class="font-thin pl-10">
                A Computer Science portal for Geeks
            </span>
        </p>

        <p class="p-2 text-justify">font-normal:
            <span class="font-normal pl-4">
                A Computer Science portal for Geeks
            </span>
        </p>

        <p class="p-2 text-justify">font-medium:
            <span class="font-medium pl-2">
                A Computer Science portal for Geeks
            </span>
        </p>

        <p class="p-2 text-justify">font-bold:
            <span class="font-bold pl-8">
                A Computer Science portal for Geeks
            </span>
        </p>

        <p class="p-2 text-justify">font-black:
            <span class="font-black pl-6">
                A Computer Science portal for Geeks
            </span>
        </p>
    </div>
</body>

</html>

Output:

tailwind-css-font-weight
Last Updated : 20/07/2025