tailwindcss-font-size

tailwindcss-font-size

A plugin that provides utilities for font-size by 'px' and 'rem'.

[Warning] This library is not tested.

Installation

Install the plugin from npm:

# Using npm
npm install tailwindcss-font-size

# Using Yarn
yarn add tailwindcss-font-size

Then add the plugin to your tailwind.config.js file:

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

Usage

Use the fsz-{n}px or fsz-{n}r utilities to set font-size. px is for pixel, r is for root font-size.

<p class="fsz-32px">This font size is 32px</p>
<p class="fsz-32r">This font size is 2rem (if option.baseSize is 16px)</p>

Configuration

You can configure the plugin by passing options to its constructor.

Parameters and default values are below.

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-font-size')({ 
      baseSize: 16, // html font-size
      minSize: 10,
      maxSize: 128 
    }),
    // ...
  ],
}

Changelog

[0.1.0] - 2022-02-05

Initial release!