Typography

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-brand-link	Supabase green text that meets contrast requirements in light and dark modes