Bring fluid type to tailwindcss
npm install tailwindcss-fluid-textA plugin that makes the use of Fluid Type a breeze.
Install the plugin from npm:
``bashUsing npm
npm install 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:
js// tailwind.config.js
module.exports = {
// You can disable the fontSize core plugin if you don't need non fluid font sizes.
// If you don't disable it, the fluid-type plugin simply overrule the default font-sizes if the keys are the same.
// Or you can use both alongside when you set an prefix in the settings
corePlugins: {
fontSize: false,
// ...
},
plugins: [
require('tailwindcss-fluid-type'),
// ...
],
};
`👉🏻 Usage
Nothing changed here to the default tailwindcss configuration:
html
Fluid type
`👉🏻 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
for better accessibility, but you can also use px.---
> _Important Note:_
> If you set values you have to set all values that you need for your
font-sizes. There is no value merging here.
---$3
`js
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-fluid-type')({
// your fluid type settings
// works only with unitless numbers
// This numbers are the defaults settings
settings: {
fontSizeMin: 1.125, // 1.125rem === 18px
fontSizeMax: 1.25, // 1.25rem === 20px
ratioMin: 1.125, // Multiplicator Min
ratioMax: 1.2, // Multiplicator Max
screenMin: 20, // 20rem === 320px
screenMax: 96, // 96rem === 1536px
unit: 'rem', // default is rem but it's also possible to use 'px'
prefix: '', // set a prefix to use it alongside the default font sizes
extendValues: true, // When you set extendValues to true it will extend the default values. Set it to false to overwrite the values.
},
// Creates the text-xx classes
// This are the default settings and analog to the tailwindcss defaults
// Each lineHeight is set unitless and we think that's the way to go especially in context with fluid type.
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']
}
};
`$3
It is also possible to set just the
without set the lineHeightjs
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-fluid-type')({
values: {
// ...
'base': 0,
// ...
}
}),
]
};
`$3
And yes, you can also set the
& lineHeight as you know from the tailwind
documentation. letterSpacing can be all values that you like.`js
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-fluid-type')({
values: {
// ...
'base': [0,
{
lineHeight: 1.6,
letterSpacing: '-0.1rem',
}
],
// ...
}
}),
]
};
`👉🏻 Samples
$3
js
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-fluid-type')({
settings: {
fontSizeMin: 1.125,
fontSizeMax: 1.25,
ratioMin: 1.125,
ratioMax: 1.2,
screenMin: 20,
screenMax: 96,
unit: 'rem',
prefix: ''
},
values: {
// ...
'base': 0,
// ...
}
}),
]
};
`html
The quick brown fox jumps over the lazy dogs
`css
.text-base {
font-size: clamp(1.125rem, calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))), 1.25rem);
}
`$3
js
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-fluid-type')({
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],
// ...
}
}),
]
};
`html
The quick brown fox jumps over the lazy dogs
`css
.text-base {
font-size: clamp(1.125rem, calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))), 1.25rem);
line-height: 1.6;
}
`$3
js
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-fluid-type')({
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',
}],
// ...
}
}),
]
};
`html
The quick brown fox jumps over the lazy dogs
`css
.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;
}
`$3
js
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-fluid-type')({
values: {
// ...
'2xs': '11px',
// ...
}
}),
]
};
`html
The quick brown fox jumps over the lazy dogs
`css
.text-2xs {
font-size: 11px;
}
`$3
js
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-fluid-type')({
settings: {
// ...
prefix: 'fluid-',
},
}),
]
};
`html
The quick brown fox jumps over the lazy dogs
`css
.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;
}
``