TailwindCSS Modular Scale Plugin

Modular scale is used in typography as a sequence of text sizes are harmonious to each other.

Here's an article that explains the Modular Scale far better than I ever will

Installation

# NPM
npm install --save-dev tailwindcss-modularscale

# Yarn
yarn add --dev tailwindcss-modularscale

Usage

Default configuration.

module.exports = {
  // ...

  plugins: [
    require('tailwindcss-modularscale')()
  ],
}

The default configuration:

{
  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.333, // Perfect Fourth
  unit: 'px',
}

The generated code will use .ms- to avoid conflicts with the textSize utilities.

.ms-sm   { font-size: 12px; }
.ms-base { font-size: 16px; }
.ms-lg   { font-size: 21px; }
.ms-xl   { font-size: 28px; }
.ms-2xl  { font-size: 38px; }
.ms-3xl  { font-size: 51px; }
.ms-4xl  { font-size: 67px; }

Custom configuration

module.exports = {
  // ...

  plugins: [
    require('tailwindcss-modularscale')({
      sizes: [
        { size: 'base', value: 0 },
        { size: 'lg', value: 1 },
      ],
      base:  1,
      ratio: 1.2,
      unit: 'rem',
    })
  ],
}

To add other variants of the font sizes

module.exports = {
  // ...

  plugins: [
    require('tailwindcss-modularscale')({
      base:     16,
      ratio:    1.333,
      variants: ['responsive'],
    })
  ],
}

Limitations

As of now, this plugin only supports one base size. I'm still not sure what's the best utility class if I were to support multiple base sizes.