TailwindCSS leading-trim utility classes.
npm install tailwindcss-capsize[![npm version][npm-img]][npm-url]
> A TailwindCSS plugin that generates text-box-trim utility classes using [Capsize].
``bash`
npm install --save-dev tailwindcss-capsize
Formerly known as leading-trim, a [proposed CSS property] to remove the extra space from text bounding boxes, which affects optical alignment. This [article from Microsoft Design] outlines the problem and how the proposed solution works.
A JavaScript config file is required due to the values needed by the plugin.
`css`
@config "../tailwind.config.js";
Other Tailwind settings can be configured through CSS directives or included in the config file.
This plugin requires a fontMetrics key added to your Tailwind theme. It shouldfontFamily
be an object with keys matching those in your definitions, and each key should have an object of the following shape:
`ts`
{
ascent: number
descent: number
lineGap: number
unitsPerEm: number
capHeight: number
}
These values can be determined by using the [Capsize website], [fontkit], [FontDrop!], or some other means.
`js`
// tailwind.config.js
import pluginCapsize from 'tailwindcss-capsize'
export default {
theme: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
fontMetrics: {
// Keys here must match those in fontFamily.
sans: {
capHeight: 2048,
ascent: 2728,
descent: -680,
lineGap: 0,
unitsPerEm: 2816,
},
},
// ...
},
plugins: [pluginCapsize],
}
The new .capsize utility class should be applied to the _direct parent_ element surrounding a text node. This class requires font-family, font-size, and line-height utilities to be applied at some point above it in the cascade in order for the required custom properties to be available.
`html
Lorem ipsum dolor
Options
$3
#### type:
number (optional, default: 16)The plugin assumes a root font-size of
16px when converting from rem values. To use a different value, pass it in (without units) to the plugin options.`js
pluginCapsize({ rootSize: 12 })
`$3
#### type:
string (optional, default: 'capsize')The default
.capsize utility class can be replaced with a custom class name if preferred.`js
pluginCapsize({ className: 'leading-trim' })
`Tips and tricks
$3
Sometimes an interface calls for truncating text to a single line or clamping text to a specified number of lines. Applying these methods to the same element that the default
.capsize class is applied to will cause issues since the class assigns pseudo ::before and ::after elements to that element.`html
Text to be truncated to a single line
`To solve this, a child element to the element with the
.capsize class should wrap the text. This element should receive the styling to truncate or line clamp.`html
Text to be truncated to a single line
``[🔡 tailwindcss-opentype] — Utility classes for advanced typographic features.
[npm-url]: https://www.npmjs.com/package/tailwindcss-capsize
[npm-img]: https://img.shields.io/npm/v/tailwindcss-capsize.svg?style=flat-square
[Capsize]: https://github.com/seek-oss/capsize
[proposed CSS property]: https://www.w3.org/TR/css-inline-3/#leading-trim
[article from microsoft design]: https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202
[Capsize website]: https://seek-oss.github.io/capsize/
[fontkit]: https://github.com/foliojs/fontkit
[FontDrop!]: https://fontdrop.info
[🔡 tailwindcss-opentype]: https://github.com/stormwarning/tailwindcss-opentype