unocss-preset-typography v0.4.0
unocss-preset-typography
Typography Preset for UnoCSS
Installation
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
Usage
// 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(),
],
})
<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">
not-prose is only available in class.
</p>
</article>
Highlight
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 size1.125rem
andh1
will with scale with that size 2.25 times. See all the supported HTML elements.all the supported html elements: https://github.com/ydcjeff/unocss-preset-typography/blob/main/src/preflights/default.ts
Any color you like
Apply any color with
prose-${colorName}
by UnoCSS (e.g.prose-coolgray
,prose-sky
) sinceprose
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
utilityApply
not-prose
to the elements to undo the typographic styles. For instance,<table class="not-prose">
will skip the styles by this preset for thetable
element (NOTE:not
utility is only usable in class since it is only used in CSS selector & not scanned by UnoCSS).
Utilities
Rule | Styles by this rule |
---|---|
prose | See on GitHub. |
Colors
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 |
Configurations
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.
Type of 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>
}
Example
// 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',
},
},
}),
],
})
Acknowledgement
License
MIT