Add clamped sizes to TailwindCSS

Here's a little snippet i use to easily create responsive spacing/text sized.

const remToPX = (rem) => rem * 16 const pxToRems = (px) => px / 16  const formatNumber = (num) => parseFloat(num.toFixed(3)).toString()  const clamped = (minPx, maxPx, minBp, maxBp) => {   const slope = (maxPx - minPx) / (maxBp - minBp)   const slopeVw = formatNumber(slope * 100)   const interceptRems = formatNumber(pxToRems(minPx - slope * minBp))   const minRems = formatNumber(pxToRems(minPx))   const maxRems = formatNumber(pxToRems(maxPx))   return `clamp(${minRems}rem, ${slopeVw}vw + ${interceptRems}rem, ${maxRems}rem)` } const MIN_VIEWPORT_WIDTH = 400 const MAX_VIEWPORT_WIDTH = 1000 const clampPx = (minPx, maxPx) => clamped(minPx, maxPx, MIN_VIEWPORT_WIDTH, MAX_VIEWPORT_WIDTH) const clampRem = (minRem, maxRem) => clamped(remToPX(minRem), remToPX(maxRem), MIN_VIEWPORT_WIDTH, MAX_VIEWPORT_WIDTH)

And i use it like so in the tailwind.config.js

    fontSize: {       '32_48': [         clampPx(32, 48),         clampPx(38, 56),       ],     },     spacing: {         '32_60': clampPx(32, 60),         '32_64': clampPx(32, 64),     }