Skip to content

A plugin to add support for the `prose` class from tailwind in twind with dark mode

Notifications You must be signed in to change notification settings

patheticGeek/twind-typography

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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