Typography preset

Provides a set of prose classes you can use to add typographic defaults to vanilla HTML.

Installation

pnpmyarnnpmbun

bash

pnpm add -D @unocss/preset-typography

bash

yarn add -D @unocss/preset-typography

bash

npm install -D @unocss/preset-typography

bash

bun add -D @unocss/preset-typography

TIP

This preset is included in the unocss package, you can also import it from there:

import presetTypography from '@unocss/preset-typography'
// or
import { presetTypography } from 'unocss'

Usage

uno.config.ts

import {
  defineConfig,
  presetAttributify,
  presetTypography,
  presetWind3 // or presetWind4
} from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(), // required!
    presetAttributify(), // required when using attributify mode
    presetTypography(),
  ],
})

ClassesAttributes

html

<article class="text-base prose dark:prose-invert xl:text-xl">
  {{ markdown }}
  <p class="not-prose">Some text</p>
</article>

html

<article text-base prose="~ dark:invert" xl="text-xl">
  {{ markdown }}
  <p class="not-prose">Some text</p>
</article>

WARNING

Notice: not-prose can only be used as a class, not as an attribute.

Highlights

Any size

Apply different typography sizes with built-in size variants: prose-sm, prose-base, prose-lg, prose-xl, and prose-2xl. The default prose class uses the base size, and you can override it with specific size utilities.

html

<!-- Different sizes -->
<article class="prose prose-sm">Small typography</article>
<article class="prose prose-base">Base typography (default)</article>
<article class="prose prose-lg">Large typography</article>
<article class="prose prose-xl">Extra large typography</article>
<article class="prose prose-2xl">2X large typography</article>

You can also combine size utilities with responsive variants:

html

<!-- Responsive typography sizes -->
<article class="prose prose-sm md:prose-base lg:prose-lg xl:prose-xl">
  Responsive typography that scales with screen size
</article>

<!-- Use with other utilities -->
<article class="prose prose-lg prose-gray dark:prose-invert">Large typography with color and dark mode</article>

Any color

Apply any color with prose-${colorName} utilities provided by presetWind3/4. Their colors come from the theme's colors key, and it's recommended that these colors have a range from 50 to 950 for proper gradation. Therefore, presetWind3/4 is required

And the default color for prose is prose-gray. The prose color utilities will apply to various typographic elements such as headings, links, blockquotes, and code blocks.

html

<!-- Different color themes -->
<article class="prose prose-gray">Gray themed typography</article>
<article class="prose prose-blue">Blue themed typography</article>
<article class="prose prose-green">Green themed typography</article>
<article class="prose prose-purple">Purple themed typography</article>

Natural Colors	Accent Colors
These have different color scheduling ranges, affecting global typography usage.	These only change the link color and do not affect other colors.
`prose-slate`	`prose-rose`
`prose-slate`	`prose-red`
`prose-gray`	`prose-orange`
`prose-zinc`	`prose-amber`
`prose-neutral`	`prose-yellow`
`prose-stone`	`prose-lime`
	`prose-green`
	`prose-emerald`
	`prose-teal`
	`prose-cyan`
	`prose-sky`
	`prose-blue`
	`prose-indigo`
	`prose-violet`
	`prose-purple`
	`prose-fuchsia`
	`prose-pink`
	`prose-rose`

You can combine colors with sizes and responsive variants:

html

<!-- Responsive color changes -->
<article class="prose prose-gray md:prose-blue lg:prose-green">
  Typography that changes color at different breakpoints
</article>

<!-- Color with size and dark mode -->
<article class="prose prose-lg prose-slate dark:prose-invert">
  Large typography with slate color and dark mode support
</article>

Dark mode with a single utility

Apply typographic dark mode with prose-invert (background color needs to be handled by users). For instance, prose dark:prose-invert will use the inverted colors in the dark mode.

Your very own style

Styles of elements not within prose will stay the same. No style resetting just like UnoCSS.

Undo with `not` utility

Apply not-prose to the elements to undo the typographic styles. For instance, <table class="not-prose"> will skip the styles by this preset for the table element (NOTE: not utility is only usable in class since it is only used in CSS selector & not scanned by UnoCSS).

Compatibility options

This preset uses some pseudo-classes which are not widely supported, but you can disable them. (#2064)

If you enable noColonNot or noColonWhere, not-prose will be unavailable.
If you enable noColonIs, attributify mode will have a wrong behavior.

Options

This preset provides comprehensive configuration options for customizing typography styles, colors, sizes, and behavior.

TIP

The CSS declarations passed to cssExtend will

override the built-in styles if the values are conflicting, else
be merged deeply with built-in styles.

selectorName

Type: string
Default: prose

The class name to use the typographic utilities. To undo the styles to the elements, use it like not-${selectorName} which is by default not-prose.

TIP

not utility is only available in class.

cssExtend

Type: Record<string, CSSObject> | ((theme: T) => Record<string, CSSObject>)
Default: undefined

Extend or override CSS selectors with CSS declaration block. Can be either a static object or a function that receives the theme and returns CSS selectors.

important

Type: boolean | string
Default: false

Control whether prose utilities should be marked with !important. When set to true, all prose styles will have !important added. When set to a string, it will be used as a CSS selector scope.

colorScheme

Type: TypographyColorScheme
Default: See below

Color scheme for typography elements. Each key represents a typographic element with values in the format [light, dark] => [color, invert-color].

Default color scheme:

json

{
  "body": [700, 300],
  "headings": [900, "white"],
  "lead": [600, 400],
  "links": [900, "white"],
  "bold": [900, "white"],
  "counters": [500, 400],
  "bullets": [300, 600],
  "hr": [200, 700],
  "quotes": [900, 100],
  "quote-borders": [200, 700],
  "captions": [500, 400],
  "kbd": [900, "white"],
  "kbd-shadows": [900, "white"],
  "code": [900, "white"],
  "pre-code": [200, 300],
  "pre-bg": [800, "rgb(0 0 0 / 50%)"],
  "th-borders": [300, 600],
  "td-borders": [200, 700]
}

sizeScheme

Type: TypographySizeScheme
Default: undefined

Size scheme for typography elements. Allows you to customize the CSS styles of various typographic elements for different sizes. Similar to cssExtend, but applies granular overlays to different text sizes.

Example:

json

{
  "sm": {
    "h1": { "font-size": "1.5rem" },
    "p": { "font-size": "0.875rem" }
  },
  "base": {
    "h1": { "font-size": "2rem" },
    "p": { "font-size": "1rem" }
  },
  "lg": {
    "h1": { "font-size": "2.5rem" },
    "p": { "font-size": "1.125rem" }
  }
}

cssVarPrefix

Type: string
Default: --un-prose

Prefix for generated CSS custom properties (CSS variables). This allows you to customize the naming of CSS variables used internally by the preset.

compatibility

Type: TypographyCompatibilityOptions
Default: undefined

See Compatibility options.

WARNING

Notice that it will affect some features.

interface TypographyCompatibilityOptions {
  noColonWhere?: boolean
  noColonIs?: boolean
  noColonNot?: boolean
}

Example

uno.config.ts

import { presetTypography } from '@unocss/preset-typography'
import { defineConfig, presetAttributify, presetWind3 } from 'unocss'

export default defineConfig({
  presets: [
    presetAttributify(), // required if using attributify mode
    presetWind3(), // required
    presetTypography({
      selectorName: 'markdown', // now use like `markdown markdown-gray`, `not-markdown`
      // cssExtend is an object with CSS selector as key and
      // CSS declaration block as value like writing normal CSS.
      cssExtend: {
        'code': {
          color: '#8b5cf6',
        },
        'a:hover': {
          color: '#f43f5e',
        },
        'a:visited': {
          color: '#14b8a6',
        },
      },
    }),
  ],
})

Typography preset ​

Installation ​

Usage ​

Highlights ​

Any size ​

Any color ​

Dark mode with a single utility ​

Your very own style ​

Undo with not utility ​

Compatibility options ​

Options ​

selectorName ​

cssExtend ​

important ​

colorScheme ​

sizeScheme ​

cssVarPrefix ​

compatibility ​

Example ​

Acknowledgement ​

Typography preset

Installation

Usage

Highlights

Any size

Any color

Dark mode with a single utility

Your very own style

Undo with `not` utility

Compatibility options

Options

selectorName

cssExtend

important

colorScheme

sizeScheme

cssVarPrefix

compatibility

Example

Acknowledgement