generate modular scale classes for tailwind. (requires: https://github.com/modularscale/modularscale-js)

tailwind-modular-scale.js

const ModularScale = require('modularscale-js');

module.exports = function ms({ addUtilities, config, e }) {
  const values = config('theme.ms', {
    sizes: [
      { size: 'sm', value: -1 },
      { size: 'base', value: 0 },
      { size: 'lg', value: 1 },
      { size: 'xl', value: 2 },
      { size: '2xl', value: 3 },
      { size: '3xl', value: 4 },
      { size: '4xl', value: 5 }
    ],
    base: 16,
    ratio: 1.33,
    unit: 'px',
    snap: 4
  });

  const variants = config('variants.ms', []);

  const msFontSize = function(size) {
    const value = ModularScale(size, values.base, values.ratio);

    if (values.unit === 'px') {
      return Math.round(value) + values.unit;
    } else {
      return value.toFixed(2) + values.unit;
    }
  };
  const msLineHeight = function(size) {
    const value = ModularScale(size, values.base, values.ratio) * values.ratio;
    return (value % values.snap < 3
      ? value % values.snap === 0
        ? value
        : Math.floor(value / values.snap) * values.snap
      : Math.ceil(value / values.snap) * values.snap) + values.unit;
  };

  const utilities = values.sizes.map(({ size, value }) => ({
    [`.ms-${e(size)}`]: {
      fontSize: msFontSize(value)
    },
    [`.ms-line-height-${e(size)}`]: {
      lineHeight: msLineHeight(value)
    }
  }));

  addUtilities(utilities, variants);
};