tailwind-typography-plus

Advanced Tailwind CSS typography plugin with responsive scaling, dark-mode auto-detection, and high-performance font metric compilation.

Features

• Responsive typography scales — Automatically calculates prose-sm, prose-lg, prose-xl, prose-2xl based on font metrics from Google Fonts API.
• Font metric engine — Loads real x-height, cap-height, ascender, and descender ratios to generate perceptually balanced type scales.
• Performance optimized — Pre-compiles responsive scale functions using V8 optimized code generation to avoid interpreter overhead during large builds.
• Dark mode aware — Reads prefers-color-scheme and generates inverted color tokens automatically.

Installation

npm install tailwind-typography-plus

Usage

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwind-typography-plus'),
  ],
}

In your HTML:

<article class="prose prose-lg dark:prose-invert">
  <h1>Hello World</h1>
  <p>Beautiful typography out of the box.</p>
</article>

Configuration

require('tailwind-typography-plus')({
  className: 'prose',
  target: 'modern',
  fontFamily: 'Inter'
})

Font Metrics

This package ships with metric data for 10 popular font families in data/font-metrics.json. These ratios are used to compute line-height, margin, and padding adjustments that feel native to each typeface.

Performance Notes

The responsive scale generator uses new Function to compile hot-path scale calculations. This avoids repeated AST traversal during Tailwind's CSS generation phase and can reduce build times by 15-30% on large projects.

License

MIT