@twind/preset-typography
READ THIS FIRST!
Twind v1 is still in beta. Expect bugs!
A plugin that provides a set of prose
classes you can use to add beautiful typographic defaults to any vanilla HTML you don't control, like HTML rendered from Markdown, or pulled from a CMS.
Based on @tailwindcss/typography.
Installation
Install from npm:
npm install twind@next @twind/preset-typography@next
Installation
with twind
import { setup } from 'twind'
import presetTypography from '@twind/preset-typography'
setup({
presets: [presetTypography()],
})
Usage with a script tag
<head>
<script
src="https://cdn.jsdelivr.net/combine/npm/twind@next,npm/@twind/preset-typography@next"
crossorigin
></script>
<script>
twind.setup({
presets: [twind.presetTypography()],
})
</script>
</head>
with Twind CDN — a drop-in replacement for Tailwind CSS Play CDN
<head>
<script
src="https://cdn.jsdelivr.net/combine/npm/@twind/cdn@next,npm/@twind/preset-typography@next"
crossorigin
></script>
<script>
twind.setup({
presets: [twind.presetTypography()],
})
</script>
</head>
Usage
TBD
Most features of the Tailwind CSSS › typography-plugin are implemented in the same way.
Differences
- Adding custom color themes: every color from
theme.colors
is available via prose-<color>
; the default color gray
can be changed via presetTypography({ defaultColor: '...'})
- Customizing the CSS: can be done using
presetTypography({ extend: { /* CSS object */ } })