Typography
Font Size
Utilities for sets the font size.
Class
| class | css | |
|---|---|---|
| text-xs | font-size: .75rem | Text |
| text-sm | font-size: .875rem | Text |
| text-md | font-size: 1rem | Text |
| text-lg | font-size: 1.125rem | Text |
| text-xl | font-size: 1.25rem | Text |
| text-2xl | font-size: 1.5rem | Text |
| text-3xl | font-size: 1.875rem | Text |
| text-4xl | font-size: 2.25rem | Text |
| text-5xl | font-size: 3rem | Text |
| text-6xl | font-size: 4rem | Text |
| text-7xl | font-size: 5rem | Text |
| text-8xl | font-size: 6rem | Text |
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
| Variant | Enabled | Responsive |
|---|---|---|
| Default | Yes | Yes |
| Dark Theme | ||
| hover | ||
| group-hover | ||
| focus | ||
| focus-visible | ||
| focus-within | ||
| active | ||
| visited | ||
| checked | ||
| disabled |
