tw-capsize

Capsize for Tailwind CSS v4 implemented using custom utilities.

Getting started

1. Install the package:

   npm install -D tw-capsize

2. Add the following line to your CSS file:

   @import "@tw-capsize";

3. Add font metrics for each font family utility (font-*) in your CSS file:

   @utility font-sans {
     --cap-height: 740;
     --ascent: 1010;
     --descent: -240;
     --line-gap: 100;
     --units-per-em: 1000;
   }
   
   /* Repeat for each font family. */

   To get your font metrics, go to Capsize, select your font under "1. Choose a font," and select the "JSON" tab. The following metrics are needed:

   • --cap-height
   • --ascent
   • --descent
   • --line-gap
   • --units-per-em

4. Add the capsize class on text elements:

   <span class="capsize">...</span>

   capsize will automatically adjust for font size (text-*) and line height (leading-*) classes. They can be set on the same element as capsize or on a parent.

[!NOTE] It's possible not all font size and line height classes are supported. Please feel free to open a pull request with fixes.