Package Exports

tailwindcss-typography-sizing

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwindcss-typography-sizing) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Tailwind CSS Typography Sizing plugin

Extra utility classes for typography sizing.

Installation

Via npm or yarn:

# Using npm
npm install tailwindcss-typography-sizing --save-dev

# Using Yarn
yarn add tailwindcss-typography-sizing --dev

Add the following in your tailwind.js file.

module.exports = {
  plugins: [require('tailwind-typography-sizing')()],
};

Usage

By default, this plugin will add the following utility classes. These are also available as responsive classes.

.display-1
.display-2
.display-3
.display-4

.sign-1
.sign-2

Configuration

You can configure the sizes for the display and sign utilities by passing the desired sizes for each utility to the options object. The default sizes are shown below.

module.exports = {
  plugins: [
    require('tailwind-typography-sizing')({
      display: {
        '1': '6rem',
        '2': '5.5rem',
        '3': '4.5rem',
        '4': '3.5rem',
      },
      sign: {
        '1': '12rem',
        '2': '8rem',
      },
    }),
  ],
};

You can also set the desired state variants by passing a variants array to the options object. The default variants are shown below.

module.exports = {
  plugins: [
    require('tailwind-typography-sizing')({
      variants: ['responsive'],
    }),
  ],
};