Typography

Font

The font depends on the theme you build. I have chosen two common fonts as an example.

Class Name

Value

Class Object

font-system-ui

Font: system-ui

👉

font-arial

Font: Arial

👉

Weight

This property strictly depends on the selected font.

Class Name

Value

Class Object

font-weight-normal

Font Weight: 400 - Normal

👉

font-weight-bold

Font Weight: 700 - Bold

👉

Size

Class Name

Value

Class Object

text-size-xs

Font Size: 0.75rem

👉

text-size-sm

Font Size: 0.875rem

👉

text-size-base

Font Size: 1rem

👉

text-size-lg

Font Size: 1.125rem

👉

text-size-xl

Font Size: 1.25rem

👉

text-size-2xl

Font Size: 1.5rem

👉

text-size-3xl

Font Size: 1.875rem

👉

text-size-4xl

Font Size: 2.25rem

👉

text-size-5xl

Font Size: 3rem

👉

text-size-6xl

Font Size: 4rem

👉

Height

Class Name

Value

Class Object

text-height-none

Text Height: 1em

👉

text-height-tight

Text Height: 1.25em

👉

text-height-snug

Text Height: 1.375em

👉

text-height-normal

Text Height: 1.5em

👉

text-height-relaxed

Text Height: 1.625em

👉

text-height-loose

Text Height: 2em

👉

Color

The structure and the amount of colors depend on the theme you will create.

Class Name

Value

Class Object

text-color-transparent

Text Color: Transparent

👉

text-color-black

Text Color: Black

👉

text-color-white

Text Color: White

👉

text-color-gray-100

Text Color: #f7fafc

👉

text-color-gray-300

Text Color: #e2e8f0

👉

text-color-gray-500

Text Color: #a0aec0

👉

text-color-gray-700

Text Color: #4a5568

👉

text-color-gray-900

Text Color: #1a202c

👉

text-color-blue

Text Color: #0144FF

👉

text-color-dark-blue

Text Color: #0037D5

👉

Align

Class Name

Value

Class Object

text-align-left

Text Align: Left

👉

text-align-center

Text Align: Center

👉

text-align-right

Text Align: Right

👉

text-align-justify

Text Align: Justify

👉

Style

Italicize

Class Name

Value

Class Object

text-style-regular

Text Style: Regular

👉

text-style-italic

Text Style: Italic

👉

Decoration

Class Name

Value

Class Object

text-decoration-none

Text Decoration: None

👉

text-decoration-strikethrough

Text Decoration: Strikethrough

👉

text-decoration-underline

Text Decoration: Underline

👉

text-decoration-overline

Text Decoration: Overline

👉

Capitalize

Class Name

Value

Class Object

text-capitalize-none

Text Capitalize: None

👉

text-capitalize-all-caps

Text Capitalize: All Caps

👉

text-capitalize-every-word

Text Capitalize: Every Word

👉

text-capitalize-lowercase

Text Capitalize: Lowercase

👉

Direction

Class Name

Value

Class Object

text-direction-left-to-right

Text Direction: Left to Right

👉

text-direction-right-to-left

Text Direction: Right to Left

👉

Breaking

Class Name

Value

Class Object

text-breaking-normal

Text Breaking: Normal

👉

text-breaking-no-wrap

Text Breaking: No Wrap

👉

text-breaking-pre

Text Breaking: Pre

👉

text-breaking-pre-wrap

Text Breaking: Pre Wrap

👉

text-breaking-pre-line

Text Breaking: Pre Line

👉

text-breaking-break-spaces

Text Breaking: Break Spaces

👉