fluid-text-plugin.js

const plugin = require("tailwindcss/plugin");

const rem = (px) => `${px / 16}rem`;

// https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/
const getFluidSize = (minSize, maxSize, minWidth = 640, maxWidth = 1280) => {
	const v = (100 * (maxSize - minSize)) / (maxWidth - minWidth);
	const r = (minWidth * maxSize - maxWidth * minSize) / (minWidth - maxWidth);

	return `clamp(${rem(minSize)}, ${v.toPrecision(3)}vw + ${rem(r.toPrecision(3))}, ${rem(
		maxSize
	)})`;
};

const fluidText = plugin(function ({ matchUtilities }) {
	matchUtilities({
		"fluid-text": (value) => {
			const [minSize, maxSize] = value.split(",").map((v) => {
				const matched = /^(\d+)px$/.exec(v);
				if (!matched) {
					throw new Error(`"${v}" is not a valid value`);
				}
				return Number(matched[1]);
			});

			return {
				"font-size": getFluidSize(minSize, maxSize),
			};
		},
	});
});

module.exports = {
	fluidText,
};