Typography styles for consistent and beautiful text rendering across your application. Use the prose class for rich content or individual
element styles for more control.
Your content goes here with proper typography styles applied automatically.
The prose class handles all the spacing, sizing, and styling for you.
Apply the prose class to a container
for automatic styling of all typography elements with proper spacing, sizing, and colors.
| Element | Applied Classes |
|---|---|
h1 | scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl |
h2 | scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight |
h3 | scroll-m-20 text-2xl font-semibold tracking-tight |
h4 | scroll-m-20 text-xl font-semibold tracking-tight |
h5 | scroll-m-20 text-lg font-semibold tracking-tight |
h6 | scroll-m-20 text-base font-semibold tracking-tight |
p | leading-7 text-on-muted (mt-2 md:mt-3 if not first) |
ul/ol | my-6 ml-6 list-disc/list-decimal space-y-2 |
a | font-medium text-primary underline underline-offset-4 hover:text-primary/80 |
code | relative rounded bg-muted text-on-muted px-[0.3rem] py-[0.2rem] font-mono text-sm |
blockquote | my-6 border-l-4 border-muted pl-6 italic text-on-muted |
strong | font-semibold |
Without the prose class, these base styles are applied globally to maintain consistent typography.
| Element/Class | Applied Classes |
|---|---|
h1 | text-4xl font-extrabold lg:text-5xl |
h2 | text-3xl font-semibold |
h3 | text-2xl font-semibold |
h4 | text-xl font-semibold |
h5 | text-lg font-semibold |
h6 | text-base font-semibold |
strong | font-semibold |
.link | hover:text-primary underline underline-offset-4 |
.tiny | text-xs font-medium leading-none |
.lead | text-lg |
.label | text-sm select-none font-medium |
blockquote | mt-2 border-l-2 pl-6 italic |
Use the prose class for rich text content
like blog posts, articles, and documentation where you need consistent spacing and styling for
all typography elements.
Use utility classes like lead, tiny, and label for specific text elements that need
custom styling outside of prose containers.