Skip to content

preset-typography.md

Latest commit

 

History

History
83 lines (64 loc) · 2.22 KB

preset-typography.md

File metadata and controls

83 lines (64 loc) · 2.22 KB
Raw
section Presets
label Typography
package @twind/preset-typography
playground true
excerpt 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.
next ./with-gatsby.md

Note Based on @tailwindcss/typography.

🤝 Compatibility

@twind/preset-typography @tailwindcss/typography
>=1.0.0-next.40 <1.1.0 >=0.5.3 <0.6
>=1.0.0-next.27 <1.0.0-next.40 >=0.4 <0.5.3

📦 Installation

with @twind/core

Install from npm:

npm install @twind/core @twind/preset-tailwind @twind/preset-typography

Add the preset to your twind config:

import { defineConfig } from '@twind/core'
import presetTailwind from '@twind/preset-tailwind'
import presetTypography from '@twind/preset-typography'

setup({
  presets: [presetTailwind(/* options */), presetTypography(/* options */)],
  /* config */
})
Usage with a script tag 
<head>
  <script
    src="https://cdn.jsdelivr.net/combine/npm/@twind/core@1,npm/@twind/preset-typography@1"
    crossorigin
  ></script>
  <script>
    twind.install({
      presets: [twind.presetTypography(/* options */)],
      /* config */
    })
  </script>
</head>

with Twind CDN

<head>
  <script src="https:///cdn.twind.style/typography" crossorigin></script>
  <script>
    twind.install({
      presets: [twind.presetTypography(/* options */)],
      /* config */
    })
  </script>
</head>

🙇 Usage

Most features of the Tailwind CSS › 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 */ } })