New

Uniform CSS has now been officially released!
Read more


Text Size

Learn about the text size special utility


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 is responsive and 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 exclude setting in your configuration.

@use "uniform" as * with (
$config: (
exclude: (
text-size
)
)
);