Typography

Font Size

Utilities for sets the font size.


Class

classcss
text-xsfont-size: .75remText
text-smfont-size: .875remText
text-mdfont-size: 1remText
text-lgfont-size: 1.125remText
text-xlfont-size: 1.25remText
text-2xlfont-size: 1.5remText
text-3xlfont-size: 1.875remText
text-4xlfont-size: 2.25remText
text-5xlfont-size: 3remText
text-6xlfont-size: 4remText
text-7xlfont-size: 5remText
text-8xlfont-size: 6remText

Usage

Set font-size to an element.

<!-- Example -->
<y class="text-md">
...
</y>

<span class="text-md">
...
</span>

Set default font-size with <body> tag.

<!-- Example -->
<body class="text-md">
...
</body>

Customize More

// @file: `src/_plugins.scss`
@include plugin(
(
utility: 'text',
//variant: 'responsive',
property: 'font-size',
modifier: (
'9xl': '7rem',
'10xl': '8rem'
...
)
)
)

Variant

VariantEnabledResponsive
DefaultYesYes
Dark Theme
hover
group-hover
focus
focus-within
active
visited
checked
disabled