Typography
An overview of all available typography CSS variables.
Some reusable patterns work better as CSS variables, or “shorthands”, than as components. Typography is one of these cases, since its usage and context vary widely.
The shorthands below are composed of core Tailwind utility classes. You can view the full list of shorthands in typography.scss.
Shorthands
| Value | Usage |
|---|---|
text-code-inline | Apply to a code element for inline code or similar custom inline content |
text-primary | Accessible Supabase green for readable branded text |
text-primary meets WCAG AA for normal text on app surfaces: darkened in light mode,
bright in dark mode. Focus rings and selected controls derive their brighter fill from
the same primary hue. See Primary and brand colors for when
to use each green.