Tailwind text fluid modular scale plugin

Credits

Heavily based off TailwindCSS Modular Scale Plugin.

Installation

Install using npm npm install @billyfagan/text-fluid-modular --save-dev

Configuration

Example tailwind configs:

Simple;

module.exports = {
…
  plugins: [
    require('@billyfagan/text-fluid-modular')({})
  ]
}

All options (shown are the defaults);

module.exports = {
  plugins: [
    require('@billyfagan/text-fluid-modular')({
    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',
      minWidth: '400',
      maxWidth: '1200'
    })
  ]
}

Usage

This package gives you new utility classes .text-fluid-ms-{size} to resize text responsively

This is the output using defaults;

.text-fluid-ms-sm {
  font-size: calc(9px + (12 - 9) * ((100vw - 400px)/(1200 - 400)));
}

.text-fluid-ms-base {
  font-size: calc(12px + (16 - 12) * ((100vw - 400px)/(1200 - 400)));
}

.text-fluid-ms-lg {
  font-size: calc(16px + (21 - 16) * ((100vw - 400px)/(1200 - 400)));
}

.text-fluid-ms-xl {
  font-size: calc(21px + (28 - 21) * ((100vw - 400px)/(1200 - 400)));
}

.text-fluid-ms-2xl {
  font-size: calc(28px + (38 - 28) * ((100vw - 400px)/(1200 - 400)));
}

.text-fluid-ms-3xl {
  font-size: calc(38px + (50 - 38) * ((100vw - 400px)/(1200 - 400)));
}

.text-fluid-ms-4xl {
  font-size: calc(50px + (67 - 50) * ((100vw - 400px)/(1200 - 400)));
}

Changelog

0.0.4

• Add usage and output example

0.0.3

• Add readme
• Change default maxWidth paramater to 1200

0.0.1

• Initial Release