tlt

tailwindcss-leading-trim

leading trim utility classes and polyfill for tailwindcss

Showing:

Popularity

Downloads/wk

17

GitHub Stars

16

Maintenance

Last Commit

7mos ago

Contributors

1

Package

Dependencies

2

Size (min+gzip)

45.2KB

License

BSD-2-Clause

Type Definitions

Tree-Shakeable

No?

Categories

Readme

tailwindcss-leading-trim

leading trim utility classes and polyfill for tailwindcss

https://www.npmjs.com/package/tailwindcss-leading-trim

what is leading-trim?

https://www.w3.org/TR/css-inline-3/#leading-trim https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202

config

in tailwind.config.js

module.exports = {
    plugins: [require("tailwindcss-leading-trim")],
    theme: {
        fontFamily: {
            "source-sans": "Source Sans Pro",
        },
        fontMetrics: {
            "Source Sans Pro": {
                capHeight: 660,
                ascent: 984,
                descent: -273,
                unitsPerEm: 1000,
            },
        },
    },
};

font metrics are optional and will be automatically picked for fonts from google fonts

easy web-based tool to extract font metrics from any font: https://seek-oss.github.io/capsize/

usage

this plugin adds 3 utility classes: .trim-start, .trim-end and .trim-both

font-family must be explicitly set on the element or a parent element with a tailwind class

how the polyfill is implemented

leading and font-family classes have a custom property added


.leading-normal {
  line-height: 1.5;
  --leading-offset: -0.25em
}

.font-source-sans {
  font-family: Source Sans Pro;
  --font-offset-start: -0.1955em;
  --font-offset-end: -0.1445em
}

and the trim classes apply a negative margin to the element based on the font family and leading


.trim-both {
  margin-top: calc( var(--leading-offset) + var(--font-offset-start,0) );
  margin-bottom: calc( var(--leading-offset) + var(--font-offset-end,0) )
}

future features?

  • more verbose option that uses pseudo-elements so as not to mess with the margin of elements
  • more docs and tooling
  • options for text-edge (edge-ex, edge-cap, others?)

issues and pull requests are welcome and encouraged!

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100