twind-typography
TypeScript icon, indicating that this package has built-in type declarations

1.2.0 • Public • Published

twind-typography

A plugin to add support for the prose class from tailwind in twind

Usage

  1. Installation
npm i twind-typography
  1. In your twind config
import { setup } from 'twind'
import typography from 'twind-typography'

setup({
  plugins: {
    ...typography({ className: 'prose' })
  }
})

Available variants

prose, prose-sm, prose-md, prose-lg, prose-xl, prose-2xl

By default, the theme is dark, to use light theme see below on how to extend

Extending the theme

To extend the theme, you can pass in theme.extend.typography

import typography from 'twind-typography'

setup({
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          a: { color: '#696969' }
          // ... other overrides
        },
        lg: {
          a: { fontSize: 420 }
          // ... other overrides
        }
        // ... other overrides for sm, md, lg, xl, 2xl
      }
    }
  },
  plugins: {
    ...typography({ className: 'prose' })
  }
})

Credits

Most of the styles are from https://github.com/tw-in-js/typography. That package has a problem with overwriting the existing styles which this package fixed

Readme

Keywords

none

Package Sidebar

Install

npm i twind-typography

Weekly Downloads

2

Version

1.2.0

License

MIT

Unpacked Size

35.8 kB

Total Files

8

Last publish

Collaborators

  • pathetic_geek