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