1---
2name: preset-typography
3description: Prose classes for typographic defaults on vanilla HTML content
4---
5 
6# Preset Typography
7 
8Prose classes for adding typographic defaults to vanilla HTML content.
9 
10## Installation
11 
12```ts
13import { defineConfig, presetTypography, presetWind3 } from 'unocss'
14 
15export default defineConfig({
16  presets: [
17    presetWind3(), // Required!
18    presetTypography(),
19  ],
20})
21```
22 
23## Basic Usage
24 
25```html
26<article class="prose">
27  <h1>My Article</h1>
28  <p>This is styled with typographic defaults...</p>
29</article>
30```
31 
32## Sizes
33 
34```html
35<article class="prose prose-sm">Small</article>
36<article class="prose prose-base">Base (default)</article>
37<article class="prose prose-lg">Large</article>
38<article class="prose prose-xl">Extra large</article>
39<article class="prose prose-2xl">2X large</article>
40```
41 
42Responsive:
43```html
44<article class="prose prose-sm md:prose-base lg:prose-lg">
45  Responsive typography
46</article>
47```
48 
49## Colors
50 
51```html
52<article class="prose prose-gray">Gray (default)</article>
53<article class="prose prose-slate">Slate</article>
54<article class="prose prose-blue">Blue</article>
55```
56 
57## Dark Mode
58 
59```html
60<article class="prose dark:prose-invert">
61  Dark mode typography
62</article>
63```
64 
65## Excluding Elements
66 
67```html
68<article class="prose">
69  <p>Styled</p>
70  <div class="not-prose">
71    <p>NOT styled</p>
72  </div>
73</article>
74```
75 
76**Note:** `not-prose` only works as a class.
77 
78## Options
79 
80```ts
81presetTypography({
82  selectorName: 'prose',      // Custom selector
83  cssVarPrefix: '--un-prose', // CSS variable prefix
84  important: false,           // Make !important
85  cssExtend: {
86    'code': { color: '#8b5cf6' },
87    'a:hover': { color: '#f43f5e' },
88  },
89})
90```
91 
92<!-- 
93Source references:
94- https://unocss.dev/presets/typography
95-->
96