QUI React2.6.3

Font Size

The Font Size theme config also includes Line Height. You can individually specify the line height using the approach described here.

Body

Tailwind Class
text-2xl
CSS Variables
font-size: --q-font-size-body-xxl
line-height: --q-line-height-body-xxl
Equivalent CSS
font-size:
line-height:
Tailwind Class
text-xl
CSS Variables
font-size: --q-font-size-body-xl
line-height: --q-line-height-body-xl
Equivalent CSS
font-size:
line-height:
Tailwind Class
text-lg
CSS Variables
font-size: --q-font-size-body-l
line-height: --q-line-height-body-l
Equivalent CSS
font-size:
line-height:
Tailwind Class
text-md
CSS Variables
font-size: --q-font-size-body-m
line-height: --q-line-height-body-m
Equivalent CSS
font-size:
line-height:
Tailwind Class
text-sm
CSS Variables
font-size: --q-font-size-body-s
line-height: --q-line-height-body-s
Equivalent CSS
font-size:
line-height:
Tailwind Class
text-xs
CSS Variables
font-size: --q-font-size-body-xs
line-height: --q-line-height-body-xs
Equivalent CSS
font-size:
line-height:
Tailwind Class
text-xxs
CSS Variables
font-size: --q-font-size-body-xxs
line-height: --q-line-height-body-xxs
Equivalent CSS
font-size:
line-height:

Heading

Tailwind Class
text-h-3xl
CSS Variables
font-size: --q-font-size-heading-xxxl
line-height: --q-line-height-heading-xxxl
Equivalent CSS
font-size:
line-height:
Tailwind Class
text-h-2xl
CSS Variables
font-size: --q-font-size-heading-xxl
line-height: --q-line-height-heading-xxl
Equivalent CSS
font-size:
line-height:
Tailwind Class
text-h-xl
CSS Variables
font-size: --q-font-size-heading-xl
line-height: --q-line-height-heading-xl
Equivalent CSS
font-size:
line-height:
Tailwind Class
text-h-lg
CSS Variables
font-size: --q-font-size-heading-l
line-height: --q-line-height-heading-l
Equivalent CSS
font-size:
line-height:
Tailwind Class
text-h-md
CSS Variables
font-size: --q-font-size-heading-m
line-height: --q-line-height-heading-m
Equivalent CSS
font-size:
line-height:
Tailwind Class
text-h-sm
CSS Variables
font-size: --q-font-size-heading-s
line-height: --q-line-height-heading-s
Equivalent CSS
font-size:
line-height:
Tailwind Class
text-h-xs
CSS Variables
font-size: --q-font-size-heading-xs
line-height: --q-line-height-heading-xs
Equivalent CSS
font-size:
line-height:
Tailwind Class
text-h-xxs
CSS Variables
font-size: --q-font-size-heading-xxs
line-height: --q-line-height-heading-xxs
Equivalent CSS
font-size:
line-height:

Metadata

Tailwind Class
text-m-xl
CSS Variables
font-size: --q-font-size-metadata-xl
line-height: --q-line-height-metadata-xl
Equivalent CSS
font-size:
line-height:
Tailwind Class
text-m-lg
CSS Variables
font-size: --q-font-size-metadata-l
line-height: --q-line-height-metadata-l
Equivalent CSS
font-size:
line-height:
Tailwind Class
text-m-md
CSS Variables
font-size: --q-font-size-metadata-m
line-height: --q-line-height-metadata-m
Equivalent CSS
font-size:
line-height:
Tailwind Class
text-m-sm
CSS Variables
font-size: --q-font-size-metadata-s
line-height: --q-line-height-metadata-s
Equivalent CSS
font-size:
line-height:
Previous
Font
Next
Font Stretch
Body
Heading
Metadata
Copyright © 2025 QUALCOMM incorporated. All rights reserved. This site is built using QUI Docs. Head over to the template repository to start building.