TailwindCSS plugin to generate utilities that trim the whitespace above and below web typography. Based on the great work in the Capsize library.

• Installation
• Configuration
• Usage
  • With @apply
  • Trimming by default
    • Opting out of trimming
• Fluid Utilities
  • Generated classes
  • Recommendations
• Options
• Limitations
• Plain CSS Version
• License

# npm
npm i --save-dev @asyarb/tailwind-capsize

To get started, add a capsize key to your Tailwind theme. The value for capsize should be an object whose keys map to the keys in theme.fontFamily with values that are "font metrics".

See below for an example config:

// tailwind.config.js
module.exports = {
  content: [],

  theme: {
    fontFamily: {
      sans: ['Inter var', 'system-ui'],
    },

    capsize: {
      metrics: {
        sans: require('@capsizecss/metrics/inter'),
      },
    },
  },

  plugins: [require('@asyarb/tailwind-capsize')],
}

To learn how to get the metrics for your font, please reference the Capsize Website.

Usage is best explained with an example:

<!-- Use on an element directly -->
<p class="font-sans text-xl leading-normal capsize">Trimmed Text</p>

<!-- Or rely on the cascade -->
<div class="font-sans text-xl leading-normal">
  <p class="capsize">Trimmed</p>
  <p class="capsize">Also trimmed</p>
</div>

Use the @apply directive normally:

p {
  @apply capsize font-sans text-xl leading-none;
}

This plugin currently does not support applying the capsize class by default. If you wish to trim text elements by default, consider using @apply:

:where(h1, h2, h3, h4, h5, h6, p) {
  @apply capsize;
}

If you've applied trimming higher up in the cascade, you can undo trimming via the no-capsize utility.

:where(.applies-capsize > p) {
  @apply capsize;
}

<div class="applies-capsize">
  <p class="no-capsize">I will not be trimmed!</p>
</div>

This plugin supports "fluid" typography with clamp() as described in this Smashing Magazine post.

Opting-out of trimming via no-capsize is also available for fluid typography.

<!-- Use on an element directly -->
<p
  class="font-sans leading-normal from-text-sm to-text-2xl screen-sm-to-xl capsize-fluid"
>
  Trimmed Fluid Text
</p>

<!-- Or rely on the cascade -->
<div class="font-sans leading-normal from-text-sm to-text-2xl screen-sm-to-xl">
  <p class="capsize-fluid">Trimmed</p>
  <p class="capsize-fluid">Also trimmed</p>
</div>

If you are looking to scale up a font size from "mobile", you may wish to add a "base" screen size to your Tailwind config.

Check out the Tailwind docs on adding small breakpoints.

This plugin supports a couple of configuration options. You can supply them as shown:

// tailwind.config.js
module.exports = {
  // ...rest of your theme
  plugins: [
    require('@asyarb/tailwind-capsize')({
      className: 'trim',
      rootFontSize: 10,
      rootLineHeight: 1.5,
      fluidUtils: true,
    }),
  ],
}

• Only accepts rem, px, or plain numbers for theme.fontSize values in a Tailwind theme.
• Only accepts unitless values for theme.lineHeight values in a Tailwind theme.

If you are looking for a "plain" CSS version of this plugin, checkout these Gists:

• Normal
• Fluid

MIT.