A plugin that makes the use of Fluid Type a breeze.
Install the plugin from npm:
# Using npm npm install tailwindcss-fluid-type # Using Yarn yarn add tailwindcss-fluid-typeThen add the plugin to your tailwind.config.js file and do your settings if you're not happy with the defaults:
// 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'), // ... ], };Nothing changed here to the default tailwindcss configuration:
<article> <h1 class="text-xl">Fluid type</h1> </article>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.
Important Note:
If you set values you have to set all values that you need for yourfont-sizes. There is no value merging here.
// 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'] } };It is also possible to set just the fontSize without set the lineHeight
// tailwind.config.js module.exports = { plugins: [ require('tailwindcss-fluid-type')({ values: { // ... 'base': 0, // ... } }), ] };And yes, you can also set the letterSpacing & lineHeight as you know from the tailwind documentation. letterSpacing can be all values that you like.
// tailwind.config.js module.exports = { plugins: [ require('tailwindcss-fluid-type')({ values: { // ... 'base': [0, { lineHeight: 1.6, letterSpacing: '-0.1rem', } ], // ... } }), ] };// 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, // ... } }), ] };<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); }// 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], // ... } }), ] };<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; }// 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', }], // ... } }), ] };<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; }// tailwind.config.js module.exports = { plugins: [ require('tailwindcss-fluid-type')({ values: { // ... '2xs': '11px', // ... } }), ] };<p class="text-2xs">The quick brown fox jumps over the lazy dogs</p>.text-2xs { font-size: 11px; }// tailwind.config.js module.exports = { plugins: [ require('tailwindcss-fluid-type')({ 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; }