tailwind-leading-trim

Installation:

npm i --save-dev tailwind-leading-trim

yarn add -D tailwind-leading-trim

Setup:

Import plugin in tailwind.config.js

Add the corresponding metrics for your type in the config, most Google fonts are already supported but you can visit this website to find the metrics for other fonts.

module.exports = {
  ...
  theme: {
    fontFamily: {
      "sans": "Inter",
    },
    fontMetrics: { 
      "capHeight": 2048,
      "ascent": 2728,
      "descent": -680,
      "lineGap": 0,
      "unitsPerEm": 2816,
    },
  },
  ...
  plugins: [require('tailwind-leading-trim')],
}

Use the tailwind class to trim leading on both the start and the end.
Font-family must be explicitly set on the element or a parent element with a tailwind class for the correct type metrics.
```
<div className="text-4xl font-sans leading-trim-both">
  The quick brown fox jumps over the lazy dog
</div>
```
The quick brown fox jumps over the lazy dog

You can also only trim the start or the end
```
<div className="text-4xl font-sans leading-trim-start">
  The quick brown fox jumps over the lazy dog
</div>
```
The quick brown fox jumps over the lazy dog
```
<div className="text-4xl font-sans leading-trim-end">
  The quick brown fox jumps over the lazy dog
</div>
```
The quick brown fox jumps over the lazy dog

Design pages with perfect vertical harmony.