Responsive spacing values

[nicgutierrez]

Hi 👋

I have a weird (maybe not?) use case and I wanted to get everybody's opinion on how to achieve this in tailwind. I'm trying to migrate a design system into tailwind and the first thing I'm looking at is the spacing tokens.

In the design system I'm using, spacing values are "responsive". That means that space-1 will be 10px on small devices, 14px on larger devices and 24px on large devices (I'm just making these up, but that's how it works).

So I'd like to use, let's say, a margin utility like mt-1 and have that value automatically change.

Here's the idea I have in mind: I can have the spacing tokens as CSS variables and update those through media queries in a global CSS file. Then I can use the css variable in tailwind.config.js.

The issue I see with that is that I'm going to end up with tons of variables and CSS that might not always be needed. I only want to output to the page as little CSS as I can.

Furthermore I have another use case regarding colors where, with the solution I mentioned above, I could end up with hundreds of variable.

Is there any way to extend tailwind's config and fit my use case?

Thanks!

[wongjn]

You could use clamp():

module.exports = {
  theme: {
    extend: {
      spacing: {
        foo: 'clamp(10px, (100vw - 500px) * 99, clamp(14px, (100vw - 1000px) * 99, 24px))',
      },
    },
  },
};

This example would make the smallest value to be 10px, then 14px when 500px < viewport width ≤ 1000px and 24px when 1000px < viewport width. I'm sure this could be optimized slightly somewhere but this is how my head can rationalize your requirement. Let's break it down.

clamp(10px, (100vw - 500px) * 99, …)

When the viewport width is less than 500px, the middle value (100vw - 500px) * 99 will be a large negative number and so clamp() will clamp this value to 10px. When the viewport width is larger than 500px, the middle value will a large positive number and so clamp() will clamp this to the value of the nested clamp() expression explained next.

clamp(14px, (100vw - 1000px) * 99, 24px)

When the viewport width is less than 1000px, the middle value (100vw - 1000px) * 99 will be a large negative number and so clamp() will clamp this value to 14px. When the viewport width is larger than 1000px, the middle value will a large positive number and so clamp() will clamp this to 24px.

[nicgutierrez]

This is such an interesting approach. Thanks so much for taking the time to help out!

I will definitely spend some time investigating but we have 8 breakpoints in our design system and I have the feeling this could get easily out of hand, but as you said, maybe there are ways to optimize it.

[fowlercraig]

@nicgutierrez, did you ever get anywhere with this beyond @wongjn's example?