Here’s a little snippet i use to easily create responsive spacing/text sized.
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
‘32_48‘: [
clampPx(32, 48),
clampPx(38, 56),
],
},
spacing: {
‘32_60‘: clampPx(32, 60),
‘32_64‘: clampPx(32, 64),
}
Which allows me to create responsive spacing based on viewport width like so:
It’s all based on this excellent work:
https://github.com/AleksandrHovhannisyan/fluid-type-scale-calculator
Don’t forget to like and share please! đ
