About Text Size
Unlike the font-<size> utility, the text-<size> applies both font-size and line-height properties to any text element. This is the recommended way of styling text since it provides two commonly used text styling properties in one.
Basic Usage
You can apply text sizing by applying the text-<size> utility. This utility can also be applied conditionally based on breakpoint.
<h1 class="text-xl md.text-4xl">
...
</h1>.text-xl {
font-size: var(--font-xl);
line-height: var(--font-4xl-leading);
}Disabling Text Size
To disable this utility, pass text-size to the excludes setting in your configuration.
@use "uniform" as * with (
$config: (
excludes: (
text-size
)
)
);