Skip to content

Instantly share code, notes, and snippets.

@yuheiy

yuheiy/fluid-text-plugin.js

Created July 15, 2022 09:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yuheiy/a84ca3dd74d36ccad7eba89ab515aa36 to your computer and use it in GitHub Desktop.
Save yuheiy/a84ca3dd74d36ccad7eba89ab515aa36 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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,
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment