Typography preset ​

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

Source Code

Installation ​

pnpm add -D @unocss/preset-typography

pnpm add -D @unocss/preset-typography

yarn add -D @unocss/preset-typography

yarn add -D @unocss/preset-typography

npm install -D @unocss/preset-typography

npm install -D @unocss/preset-typography

import { presetTypography } from 'unocss'

import { presetTypography } from 'unocss'

Usage ​

// uno.config.ts
import {
  defineConfig,
  presetAttributify, presetTypography, presetUno
} from 'unocss'

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

// uno.config.ts
import {
  defineConfig,
  presetAttributify, presetTypography, presetUno
} from 'unocss'

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

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

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

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

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

Highlights ​

Any font size ​

Apply any font size for body you like and prose will scale the styles for the respective HTML elements. For instance, prose text-lg has body font size 1.125rem and h1 will with scale with that size 2.25 times. See all the supported HTML elements.

Any color ​

Apply any color with prose-${colorName} by UnoCSS (e.g. prose-coolgray, prose-sky) since prose does not have any color by default. See all available colors. For instance, prose prose-truegray will use the respective colors for the respective HTML elements.

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.

Utilities ​

Colors ​

Options ​

This preset has selectorName and cssExtend configurations for users who like to override or extend.

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.

cssExtend ​

• Type: Record<string, CSSObject>
• Default: undefined

Extend or override CSS selectors with CSS declaration block.

compatibility ​

• Type: TypographyCompatibilityOptions
• Default: undefined

See Compatibility options.

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

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

Example ​

// uno.config.ts
import { defineConfig, presetAttributify, presetUno } from 'unocss'
import { presetTypography } from '@unocss/preset-typography'

export default defineConfig({
  presets: [
    presetAttributify(), // required if using attributify mode
    presetUno(), // 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',
        },
      },
    }),
  ],
})

// uno.config.ts
import { defineConfig, presetAttributify, presetUno } from 'unocss'
import { presetTypography } from '@unocss/preset-typography'

export default defineConfig({
  presets: [
    presetAttributify(), // required if using attributify mode
    presetUno(), // 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',
        },
      },
    }),
  ],
})

Acknowledgement ​

• TailwindCSS Typography
• WindiCSS Typography