Moved to https://github.com/unocss/unocss/tree/main/packages/preset-typography
Typography Preset for UnoCSS
npm i unocss-preset-typography unocss --save-dev # with npm
yarn add unocss-preset-typography unocss -D # with yarn
pnpm add unocss-preset-typography unocss -D # with pnpm
// unocss.config.js
import { presetAttributify, presetUno, defineConfig } from 'unocss'
import { presetTypography } from 'unocss-preset-typography'
export default defineConfig({
presets: [
presetAttributify(), // required if using attributify mode
presetUno(), // required
presetTypography(),
],
})
With classes | With attributes |
---|---|
|
|
Any font size you want
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 you like
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 in ONE 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 own style, still your 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).
Rule | Styles by this rule |
---|---|
prose |
See on GitHub. |
Rules (color) |
---|
prose-rose |
prose-pink |
prose-fuchsia |
prose-purple |
prose-violet |
prose-indigo |
prose-blue |
prose-sky |
prose-cyan |
prose-teal |
prose-emerald |
prose-green |
prose-lime |
prose-yellow |
prose-amber |
prose-orange |
prose-red |
prose-gray |
prose-slate |
prose-zinc |
prose-neutral |
prose-stone |
This preset has className
and cssExtend
configurations for users who like to
override or extend.
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.
TypographyOptions
export interface TypographyOptions {
/**
* The class name to use the typographic utilities.
* To undo the styles to the elements, use it like
* `not-${className}` which is by default `not-prose`.
*
* Note: `not` utility is only available in class.
*
* @defaultValue `prose`
*/
className?: string
/**
* Extend or override CSS selectors with CSS declaration block.
*
* @defaultValue undefined
*/
cssExtend?: Record<string, CSSObject>
}
// unocss.config.ts
import { presetAttributify, presetUno, defineConfig } from 'unocss'
import { presetTypography } from 'unocss-preset-typography'
export default defineConfig({
presets: [
presetAttributify(), // required if using attributify mode
presetUno(), // required
presetTypography({
className: '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',
},
},
}),
],
})
MIT