Các tiện ích để kiểm soát leading, hoặc line height, của một phần tử.
| Class | Styles |
|---|---|
text-<size>/<number> | font-size: <size>;
line-height: calc(var(--spacing) * <number>); |
text-<size>/(<custom-property>) | font-size: <size>;
line-height: var(<custom-property>); |
text-<size>/[<value>] | font-size: <size>;
line-height: <value>; |
leading-none | line-height: 1; |
leading-<number> | line-height: calc(var(--spacing) * <number>); |
leading-(<custom-property>) | line-height: var(<custom-property>); |
leading-[<value>] | line-height: <value>; |
Sử dụng các tiện ích font size như text-sm/6 và text-lg/7 để đặt font size và line-height của một phần tử cùng một lúc:
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
<p class="text-base/6 ...">So I started to walk into the water...</p><p class="text-base/7 ...">So I started to walk into the water...</p><p class="text-base/8 ...">So I started to walk into the water...</p>Mỗi tiện ích font size cũng đặt một line height mặc định khi không được cung cấp. Bạn có thể tìm hiểu thêm về các giá trị này và cách tùy chỉnh chúng trong tài liệu font-size.
Sử dụng các tiện ích leading-<number> như leading-6 và leading-7 để đặt line height của một phần tử độc lập với font-size:
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
<p class="text-sm leading-6">So I started to walk into the water...</p><p class="text-sm leading-7">So I started to walk into the water...</p><p class="text-sm leading-8">So I started to walk into the water...</p>Sử dụng tiện ích leading-none để đặt line height của một phần tử bằng với font size của nó:
The quick brown fox jumps over the lazy dog.
<p class="text-2xl leading-none ...">The quick brown fox...</p>Use the leading-[<value>] syntax to set the line height based on a completely custom value:
<p class="leading-[1.5] ..."> Lorem ipsum dolor sit amet...</p>For CSS variables, you can also use the leading-(<custom-property>) syntax:
<p class="leading-(--my-line-height) ..."> Lorem ipsum dolor sit amet...</p>This is just a shorthand for leading-[var(<custom-property>)] that adds the var() function for you automatically.
Prefix a line-height utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<p class="leading-5 md:leading-6 ..."> Lorem ipsum dolor sit amet...</p>Learn more about using variants in the variants documentation.
The leading-<number> utilities are driven by the --spacing theme variable, which can be customized in your own theme:
@theme { --spacing: 1px; }Learn more about customizing the spacing scale in the theme variable documentation.