How to make design tokens responsive in Tailwind 4?

[katerlouis]

My --spacing-foo should be 20px on mobile and 40px on desktop. Nothing fancy;

Yet, the following results in 40px across all viewports:

/* main.css */
@theme {
  --spacing-foo: 20px;
}

@media (width > 600px) {
  @theme {
    --spacing-foo: 40px;
  }
}

Changing the nesting and putting media query inside @theme does not work as it breaks the site.

---

The workaround for that (and I fear the intended workflow) is not satisfactory for me either.

/* main.css */
@theme {
  --spacing-foo-small: 20px;
  --spacing-foo-large: 40px;
}

<div class="px-foo-small @md:px-foo-large">...

Having to do that everywhere I want to use spacing foo is obnoxious and for goes against the concept of globalized design tokens. Using @md:px-foo-large can be easily forgotten and adding multiple breakpoints, again globally, requires to go through each and every usage instance and add @lg:px-foo-xlarge.

---

Since I could not find anything regarding this in the docs, I wanted to ask how you would realize the desired behavior?

[wongjn]

Replace the second @theme with :root:

@theme {
  --spacing-foo: 20px;
}

@media (width > 600px) {
  :root {
    --spacing-foo: 40px;
  }
}

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

[J-S-Bach]

Is it also possible to use tailwind breakpoints? According to this, it is not possible to use css variables like this:

@theme {
  --spacing-foo: 20px;
}

@media (width > var(--breakpoint-md)) {
  :root {
    --spacing-foo: 40px;
  }
}

But maybe there is another way?

[wongjn]

You can use @variant like:

@theme {
  --spacing-foo: 20px;
}

@variant md {
  :root {
    --spacing-foo: 40px;
  }
}

Or theme() like:

@theme {
  --spacing-foo: 20px;
}

@media (width > theme(--breakpoint-md)) {
  :root {
    --spacing-foo: 40px;
  }
}

[J-S-Bach]

Great, many thanks!

[abdul-samad0]

But @wongjn replacing the theme with :root is not the good approach with big scaling application, can cause flickers specificity bugs (especially when you use multiple themes or containers). Good approach will be using the sm:, md: if inline className is getting bigger then we can replace it with the @apply
.btn { @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 md:px-2 md:py-1 ;