Tailwind CSS Font Size

Class này chấp nhận nhiều giá trị trong tailwind CSS, bao gồm các thuộc tính dạng class. Nó là một lựa chọn thay thế cho CSS font-size property. Class này dùng để đặt kích thước chữ cho văn bản HTML.

Font size classes:

  • text-xs: Class này định nghĩa kích thước chữ là extra small (rất nhỏ).
  • text-sm: Class này định nghĩa kích thước chữ là small (nhỏ).
  • text-base: Class này định nghĩa kích thước chữ là base size (kích thước cơ bản).
  • text-lg: Class này định nghĩa kích thước chữ là large (lớn).
  • text-xl: Class này định nghĩa kích thước chữ là extra-large (rất lớn).
  • text-2xl: Class này định nghĩa kích thước chữ lớn gấp 2 lần extra-large.
  • text-3xl: Class này định nghĩa kích thước chữ lớn gấp 3 lần extra-large.
  • text-4xl: Class này định nghĩa kích thước chữ lớn gấp 4 lần extra-large.
  • text-5xl: Class này định nghĩa kích thước chữ lớn gấp 5 lần extra-large.
  • text-6xl: Class này định nghĩa kích thước chữ lớn gấp 6 lần extra-large.
  • text-7xl: Class này định nghĩa kích thước chữ lớn gấp 7 lần extra-large.
  • text-8xl: Class này định nghĩa kích thước chữ lớn gấp 8 lần extra-large.
  • text-9xl: Class này định nghĩa kích thước chữ lớn gấp 9 lần extra-large.

Note: Hãy thay đổi kích thước trong component với kích thước cần thiết ở trên.

Syntax:

<element class="text-size">...</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 Size Class</b>
    <div class="mx-24 bg-green-200">
        <p class="text-xs">
            Geeksforgeeks: A Computer Science portal for Geeks
        </p>

        <p class="text-sm">
            Geeksforgeeks: A Computer Science portal for Geeks
        </p>

        <p class="text-base">
            Geeksforgeeks: A Computer Science portal for Geeks
        </p>

        <p class="text-lg">
            Geeksforgeeks: A Computer Science portal for Geeks
        </p>

        <p class="text-xl">
            Geeksforgeeks: A Computer Science portal for Geeks
        </p>

    </div>
</body>

</html>

Output:

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