笙亿网络策划

Tailwind CSS 字体大小怎么设置？

约 6 分钟读完 2 阅
文章导读
Previous Quiz Next Tailwind CSS 字体大小是一组预定义的 class，用于管理和调整网页上的文本大小。
📋 目录
  1. 壹 Tailwind CSS 字体大小 Classes
  2. 贰 Tailwind CSS 字体大小 Classes 的功能
  3. 叁 Tailwind CSS 字体大小 Class 示例
  4. 肆 设置字体大小
A A

Tailwind CSS - 字体大小

Previous
Quiz
Next

Tailwind CSS 字体大小是一组预定义的 class，用于管理和调整网页上的文本大小。

Tailwind CSS 字体大小 Classes

下面列出了指定不同字体大小的 Tailwind CSS classes。

Class CSS Properties
text-xs font-size: 0.75rem; /* 12px */
line-height: 1rem; /* 16px */
text-sm font-size: 0.875rem; /* 14px */
line-height: 1.25rem; /* 20px */
text-base font-size: 1rem; /* 16px */
line-height: 1.5rem; /* 24px */
text-lg font-size: 1.125rem; /* 18px */
line-height: 1.75rem; /* 28px */
text-xl font-size: 1.25rem; /* 20px */
line-height: 1.75rem; /* 28px */
text-2xl font-size: 1.5rem; /* 24px */
line-height: 2rem; /* 32px */
text-3xl font-size: 1.875rem; /* 30px */
line-height: 2.25rem; /* 36px */
text-4xl font-size: 2.25rem; /* 36px */
line-height: 2.5rem; /* 40px */
text-5xl font-size: 3rem; /* 48px */
line-height: 1;
text-6xl font-size: 3.75rem; /* 60px */
line-height: 1;
text-7xl font-size: 4.5rem; /* 72px */
line-height: 1;
text-8xl font-size: 6rem; /* 96px */
line-height: 1;
text-9xl font-size: 8rem; /* 128px */
line-height: 1;

Tailwind CSS 字体大小 Classes 的功能

  • text-xs: 将字体大小设置为 12 像素，行高为 16 像素。
  • text-sm: 将字体大小设置为 14 像素，行高为 20 像素。
  • text-base: 将字体大小设置为 16 像素，行高为 24 像素。
  • text-lg: 将字体大小设置为 18 像素，行高为 28 像素。
  • text-xl: 将字体大小设置为 20 像素，行高为 28 像素。
  • text-2xl: 将字体大小设置为 24 像素，行高为 32 像素。
  • text-3xl: 将字体大小设置为 30 像素，行高为 36 像素。
  • text-4xl: 将字体大小设置为 36 像素，行高为 40 像素。
  • text-5xl: 将字体大小设置为 48 像素，使用默认行高。
  • text-6xl: 将字体大小设置为 60 像素，使用默认行高。
  • text-7xl: 将字体大小设置为 72 像素，使用默认行高。
  • text-8xl: 将字体大小设置为 96 像素，使用默认行高。
  • text-9xl: 将字体大小设置为 128 像素，使用默认行高。

Tailwind CSS 字体大小 Class 示例

下面是一些 Tailwind CSS 字体大小 class 的示例，展示了如何使用预定义的 classes 轻松调整和管理文本大小。

设置字体大小

此示例展示了使用 Tailwind CSS utility classes 应用不同字体大小。这里，'text-xs' 将字体大小设置为 12px，'text-sm' 为 14px，'text-base' 为 16px，'text-lg' 为 18px。字体大小范围从 'text-xl' 到 'text-9xl'。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
     <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold">
        Tailwind CSS Font Size
    </h1>  
    <br>
    <p class="text-xs mb-4">
        Hey, I am with font size 12px (text-xs).
    </p>
    <p class="text-sm mb-4">
        Hey, I am with font size 14px (text-sm).
    </p>
    <p class="text-base mb-4">
        Hey, I am with font size 16px (text-base).
    </p> 
    <p class="text-lg mb-4">
        Hey, I am with font size 18px (text-lg).
    </p>
    <p class="text-xl mb-4">
        Hey, I am with font size 20px (text-xl).
    </p>
    <p class="text-2xl">
        Hey, I am with font size 24px (text-2xl).
    </p> 
</body>

</html>

使用 Tailwind CSS utility classes 设置字体大小时，行高会根据 class 相应调整。你可以使用 'line-height' 比例中定义的任何值，或使用任意值来定义行高。使用 Tailwind CSS，字体大小最大可达 9xl。