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

marialuizaaires/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

About

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

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 100.0%