How to Create a Range-Based Utility in Tailwind 4.0?

[mustafa-soylemez]

Hello everyone,

I'm trying to create a range utility in Tailwind 4.0. The idea is to scale a value between a given minimum and maximum based on the viewport width. For example, if I set a minimum of 20 and a maximum of 100, and define viewport limits of 1920px (max) and 375px (min), the value should scale from 100 to 20 as the screen width shrinks from 1920px to 375px. At 1920px, the value should be exactly 100, and at 375px, exactly 20.

Example usage:
w-range-[200px,900px] text-range-[1rem,10rem,480px,1680px]

• First value = min
• Second value = max
• Third and fourth values (viewport min and max) are optional. If not provided, default values are used. If provided, the utility should use those values.

I managed to create a sample setup using tailwind.config.js, but what I’m really curious about is whether this can be achieved purely with CSS in Tailwind 4.0, without needing to extend the config file.

Thanks in advance!

[mustafa-soylemez]

Here’s the tailwind.config.js example I mentioned:

const minViewport = theme('clampDefaults.minViewport', '375');
const maxViewport = theme('clampDefaults.maxViewport', '1440');

const properties = {
  "w": "width",
  "h": "height",
  "max-w": "max-width",
  "max-h": "max-height",
  "p": "padding",
  "m": "margin",
  "text": "font-size",
  "gap": "gap"
};

Object.entries(properties).forEach(([short, cssProperty]) => {
  matchUtilities(
	{
	  [`${short}-clamp`]: (value) => {
		const values = value.replace(/\[|\]/g, '').split(',');

		const [minSize, maxSize, minVP, maxVP] = values.map(v => v.trim());

		return {
		  [cssProperty]: `clamp(calc(${minSize} * 1px),calc((${minSize} * 1px) + (${maxSize} - ${minSize}) * ((100vw - (${minVP || minViewport} * 1px)) / (${maxVP || maxViewport} - ${minVP || minViewport}))), calc(${maxSize} * 1px))`
		};
	  }
	},
	{ values: {} }
  );
});

matchUtilities({
	'gap-range': (value) => ({
	   gap: `clamp(${value}px, 5vw, ${value}px)`,
	}),
 }, {
	values: Object.fromEntries([...Array(10)].map((_, i) => [`[${i},${i + 10}]`, [i, i + 10]]))
 }),

[wongjn]

I don't think you can have all the parameters in one class name, you'd need to split it up and use CSS variables. You can at have at least two parameters per class; one that is the value and the other that is the modifier. I think it makes sense to have the modifier be the viewports, since that is optional.

https://play.tailwindcss.com/XLhwOyIkjO?file=css

[mustafa-soylemez]

I hadn’t thought of this approach — thanks a lot for the example as well, it’s definitely a great starting point.
It would be nice if I can refine it into a shorter and more efficient solution. I’m also curious to hear what others think about this.

If I don’t receive any other suggestions, I’ll definitely mark this as the answer — thanks again! 👌