Package Exports

tailwind-vertical-rhythm

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwind-vertical-rhythm) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Tailwind.css Vertical Rhythm

Beautifully aligned type with Tailwind.css.

Install

npm install --save-dev tailwind-vertical-rhythm

—or—

yarn add -D tailwind-vertical-rhythm

Configure tailwind.config.js

Use https://codepen.io/sebdesign/pen/EKmbGL?editors=0011 to calculate the cap heights of your fonts.

{
  // you can disable standard font size and line height classes and use vr-*
  // classes instead
  corePlugins: {
    fontSize: false,
    lineHeight: false
  },
  verticalRhythm: {
    defaultLineHeight: 'loose',
    fontCapHeight: {
      // Calculated using https://codepen.io/sebdesign/pen/EKmbGL?editors=0011
      'default': 0.705,
      'Open Sans': 0.72
    },
    height: 0.5 // Vertical rhythm in rems
  },
  plugins: [
    require('tailwind-vertical-rhythm')
  ]
}

And now use .vr{-fontFamily?}-{lineHeight}-{fontSize} classes to set line height, font size, and possibly non-default font family at the same time.

Also, there’s a .vr-debug class showing the vertical rhythm to see where you’re not aligned.

Based on https://github.com/ceteio/styled-components-rhythm