👉🏻 tailwindcss-fluid-type
A plugin that makes the use of Fluid Type a breeze.
👉🏻 Installation
Install the plugin from npm:
npm install tailwindcss-fluid-type
yarn add tailwindcss-fluid-type
Then add the plugin to your tailwind.config.js file and do your settings if you're not happy with the defaults:
module.exports = {
theme: {
},
corePlugins: {
fontSize: false,
},
plugins: [
require('tailwindcss-fluid-type'),
],
};
👉🏻 Usage
Nothing changed here to the default tailwindcss configuration:
<article>
<h1 class="text-xl">Fluid type</h1>
</article>
👉🏻 Configuration
The plugin comes with a default configuration (see below) but it's possible to customize this config for your project.
As default, we use rem
for better accessibility, but you can also use px
.
Default configuration
module.exports = {
theme: {
fluidType: {
settings: {
fontSizeMin: 1.125,
fontSizeMax: 1.25,
ratioMin: 1.125,
ratioMax: 1.2,
screenMin: 20,
screenMax: 96,
unit: 'rem',
prefix: ''
},
values: {
'xs': [-2, 1.6],
'sm': [-1, 1.6],
'base': [0, 1.6],
'lg': [1, 1.6],
'xl': [2, 1.2],
'2xl': [3, 1.2],
'3xl': [4, 1.2],
'4xl': [5, 1.1],
'5xl': [6, 1.1],
'6xl': [7, 1.1],
'7xl': [8, 1],
'8xl': [9, 1],
'9xl': [10, 1],
}
},
},
variants: {
fluidType: ['responsive']
}
};
Fluid type configuration without lineHeight
It is also possible to set just the fontSize
without set the lineHeight
module.exports = {
theme: {
fluidType: {
values: {
'base': 0,
}
}
}
};
Fluid type configuration with lineHeight
& letterSpacing
And yes, you can also set the letterSpacing
& lineHeight
as you know from the tailwind
documentation. letterSpacing
can be all values that you like.
module.exports = {
theme: {
fluidType: {
values: {
'base': [0,
{
lineHeight: 1.6,
letterSpacing: '-0.1rem',
}
],
}
}
}
};
👉🏻 Samples
Just set the fontSize
property
module.exports = {
theme: {
fluidType: {
settings: {
fontSizeMin: 1.125,
fontSizeMax: 1.25,
ratioMin: 1.125,
ratioMax: 1.2,
screenMin: 20,
screenMax: 96,
unit: 'rem',
prefix: ''
},
values: {
'base': 0,
}
}
}
};
<p class="text-base">The quick brown fox jumps over the lazy dogs</p>
.text-base {
font-size: clamp(1.125rem, calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))), 1.25rem);
}
Set the fontSize
& lineHeight
property
module.exports = {
theme: {
fluidType: {
settings: {
fontSizeMin: 1.125,
fontSizeMax: 1.25,
ratioMin: 1.125,
ratioMax: 1.2,
screenMin: 20,
screenMax: 96,
unit: 'rem',
prefix: ''
},
values: {
'base': [0, 1.6],
}
}
}
};
<p class="text-base">The quick brown fox jumps over the lazy dogs</p>
.text-base {
font-size: clamp(1.125rem, calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))), 1.25rem);
line-height: 1.6;
}
Set the fontSize
, lineHeight
& letterSpacing
property
module.exports = {
theme: {
fluidType: {
settings: {
fontSizeMin: 1.125,
fontSizeMax: 1.25,
ratioMin: 1.125,
ratioMax: 1.2,
screenMin: 20,
screenMax: 96,
unit: 'rem',
prefix: '',
},
values: {
'base': [0, {
lineHeight: 1.6,
letterSpacing: '-0.1rem',
}],
}
}
}
};
<p class="text-base">The quick brown fox jumps over the lazy dogs</p>
.text-base {
font-size: clamp(1.125rem, calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))), 1.25rem);
line-height: 1.6;
letter-spacing: -0.1rem;
}
Set a value as string
module.exports = {
theme: {
extend: {
fluidType: {
values: {
'2xs': '11px',
}
}
}
}
};
<p class="text-2xs">The quick brown fox jumps over the lazy dogs</p>
.text-2xs {
font-size: 11px;
}
Set a prefix
module.exports = {
theme: {
extend: {
fluidType: {
settings: {
prefix: 'fluid-',
},
}
}
}
};
<p class="fluid-text-base">The quick brown fox jumps over the lazy dogs</p>
.fluid-text-base {
font-size: clamp(1.125rem, calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))), 1.25rem);
line-height: 1.6;
letter-spacing: -0.1rem;
}
👉🏻 Live Demo
Fluid Type Live Demo