deadlocked247/tailwindcss-leading-trim

tailwind-leading-trim

Installation

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

or

yarn add -D tailwind-leading-trim

Setup

To set up the plugin, follow these steps:

1. Import the plugin in tailwind.config.js:

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

2. Use the Tailwind class to trim leading on both the start and the end:

<div className="text-4xl font-sans leading-trim-both">
  The quick brown fox jumps over the lazy dog
</div>

3. You can also trim just the start or the end:

Trim the start:

<div className="text-4xl font-sans leading-trim-start">
  The quick brown fox jumps over the lazy dog
</div>

Trim the end:

<div className="text-4xl font-sans leading-trim-end">
  The quick brown fox jumps over the lazy dog
</div>

---

Credits

Created by Burak Aslan.

---