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; }To ensure compabibility with tailwind-merge, extends it's configuration to recognize fluid-text sizes. This enables seamless overriding and filtering of tailwind classes with tailwind-merge utility.
import { type ClassValue, clsx } from "clsx"; import { extendTailwindMerge } from "tailwind-merge"; const twMerge = extendTailwindMerge({ extend: { classGroups: { "font-size": [ { "fluid-text": ["sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl", "9xl", ], }, ], }, }, }); export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } Sometimes it may be useful to override the default line height that you set in your config. Therefore, this plugin supports the Tailwind font size line-height shorthand. This works as follows.
<h1 class="text-9xl/snug">The quick brown fox jumps over the lazy dogs</h1>See the official Tailwind documentation for more information.