Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProThis item has no props to tune. Use the lens above to change theme, density, direction and more.
Typography is not shipped as a component: there is nothing to install. The preview shows the utility classes used for each text element, so you can copy the ones you need onto your own markup.
| Element | Classes |
|---|---|
| h1 | scroll-m-20 text-4xl font-extrabold tracking-tight text-balance |
| 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 |
| p | leading-7 [&:not(:first-child)]:mt-6 |
| blockquote | mt-6 border-l-2 pl-6 italic |
| list | my-6 ml-6 list-disc [&>li]:mt-2 |
| inline code | bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold |
| lead | text-muted-foreground text-xl |
| large | text-lg font-semibold |
| small | text-sm leading-none font-medium |
| muted | text-muted-foreground text-sm |
h1 per page in your app and step heading levels down in order; the classes only change how a heading looks, not its level.@tailwindcss/typography plugin (prose) styles a whole block of rendered Markdown at once.