How do you register custom border-spacing utilities?

[cossssmin]

So by default Tailwind CSS 4 outputs border-spacing utilities like this:

@layer properties {
	@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
		.border-spacing-1 {
			border-spacing: 4px;
		}
	}
}

Since I can't use that in my environment (HTML emails), I need a way to have it just output the selector, without the @ rules:

.border-spacing-1 {
	border-spacing: 4px;
}

Tried stuff like this but it obviously doesn't work:

@utility border-spacing-* {
  border-spacing: --value(--border-spacing-*);
}

Is this possible in some way, so I don't have to use arbitrary variants? Lightning won't lower that syntax so need to find another way.

Thanks!

[wongjn]

I think you have some other CSS transformations happening outside of Tailwind causing that syntax behavior. As per this Tailwind Play, Tailwind v4 by default outputs it as:

@layer utilities {
  .border-spacing-1 {
    --tw-border-spacing-x: calc(var(--spacing) * 1);
    --tw-border-spacing-y: calc(var(--spacing) * 1);
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
  }
}

Adding:

@utility border-spacing-* {
  border-spacing: --spacing(--value(integer));
}

Then outputs:

@layer utilities {
  .border-spacing-1 {
    --tw-border-spacing-x: calc(var(--spacing) * 1);
    --tw-border-spacing-y: calc(var(--spacing) * 1);
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
  }
  .border-spacing-1 {
    border-spacing: calc(var(--spacing) * 1);
  }
}

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

[cossssmin]

Yes, sorry, forgot to mention Lightning CSS.

I am basically doing this:

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

... which I see Lightning does not resolve/lower to older syntax: see playground

I guess in the end this would require the ability to disable a namespace, which I'm not sure will ever be on the team's roadmap.

Oh well, it's ugly but arbitrary values will do 😅