https://github.com/juliekoubova/tailwind-vertical-rhythm
Beautifully aligned type with tailwind.css.
https://github.com/juliekoubova/tailwind-vertical-rhythm
css tailwind tailwindcss tailwindcss-plugin vertical-rhythm
Last synced: 6 months ago
JSON representation
Beautifully aligned type with tailwind.css.
- Host: GitHub
- URL: https://github.com/juliekoubova/tailwind-vertical-rhythm
- Owner: juliekoubova
- Created: 2020-04-09T21:40:15.000Z (about 6 years ago)
- Default Branch: dev
- Last Pushed: 2023-01-06T03:06:18.000Z (over 3 years ago)
- Last Synced: 2025-11-12T05:40:38.643Z (8 months ago)
- Topics: css, tailwind, tailwindcss, tailwindcss-plugin, vertical-rhythm
- Language: HTML
- Homepage:
- Size: 1.91 MB
- Stars: 17
- Watchers: 2
- Forks: 3
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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.
```js
{
// 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