Extra utility classes for typography sizing.
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')()],
};
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
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'],
}),
],
};