How to recreate semantic spacing utilities in v4 (like p-small, mt-widget) without rebuilding all spacing variants manually?

[zecka]

TLDR:

On v3 I could just define custom spacing in tailwind.config.js like theme: { extend: { spacing: { small: '0.5rem' }}} and get all utilities like mt-small, mb-small, left-small, etc. automatically.

How can I do the same in v4 now that there’s no config file?

---

Hi everyone,

In Tailwind v3, it was extremely easy to define semantic spacing tokens directly in the tailwind.config.js file.
For example, we could simply extend the spacing scale:

theme: {
  extend: {
    spacing: {
      small: '0.5rem',
      widget: '1.5rem',
    },
  },
}

Then we instantly got access to all spacing-related utilities out of the box: p-small, px-small, mt-widget, inset-x-widget, etc.

With Tailwind v4, since there’s no tailwind.config.js, I’m struggling to find a clean and scalable way to achieve the same thing.

I find a way with css variable but this is much less clean

<div class="p-[--spacing-small] mt-[--spacing-widget]"></div>

I also tried building a custom plugin that generates utilities like p-small, mt-small, inset-x-small, etc. from a JS map:

const spacings = {
  small: 'var(--spacing-small)',
  widget: 'var(--spacing-widget)',
};

It works, but it feels very heavy. I have to manually list every possible spacing prefix (p, px, py, m, mx, my, inset, space-x, etc.), and maintaining this over time could be error-prone.

Is there any recommended or planned approach in Tailwind v4 to recreate semantic spacing aliases (like p-small, mt-widget, etc.) without having to manually define all variants?

Or could Tailwind provide a way to automatically generate all spacing utilities from semantic tokens defined in @theme, similar to how it worked in v3?

[zecka]

Damn, I just had to ask the question to find the answer myself...
Declaring CSS variables with the --spacing prefix inside @theme does the trick:

@theme {
  --spacing-small: 0.5rem;
}

Then just use mt-small, pb-small, .....

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