[feature request] Need horizontal/vertical separation in --spacing values in @theme customization

[efekurnaz]

It is currently not possible to have separate row/column gaps within @theme customization.

/* input.css */

@theme {
--spacing-y-foo: spacing(4);
--spacing-x-foo: spacing(3);
}

/* output.css */

.gap-y-foo {
  gap: 1rem;
}
.gap-x-foo {
  gap: 0.75rem;
}

/* expected.css */

.gap-y-foo {
  row-gap: 1rem;
}
.gap-x-foo {
  column-gap: 0.75rem;
}

/* current_workaround_input.css */

@theme {
--custom-y-foo: spacing(4);
--custom-x-foo: spacing(3);
}
@utility gap-y-foo {
 @apply gap-y-(--custom-y-foo);
}
@utility gap-x-foo {
 @apply gap-x-(--custom-x-foo);
}

[efekurnaz]

[rozsazoltan]

You can currently declare custom utilities, but you should use the --spacing() function instead of your proposed spacing(). Note that this will generate duplicate rules - a known and consistent behavior. If you are able to handle duplicate removal via a post-processing plugin, this approach could work:

• https://play.tailwindcss.com/dMnJYVM2d9?file=css

@import "tailwindcss";

@theme {
  --spacing-x: --spacing(4);
  --spacing-y: --spacing(8);
}

@utility mx-* {
  margin-inline: calc(var(--spacing-x) * --value(integer));
}

@utility my-* {
  margin-block: calc(var(--spacing-y) * --value(integer));
}

If you write the necessary post-processing plugin, it won't add any overhead to your application, as you only need to run it during the build process (simply to maintain the size efficiency of the compiled CSS). During development, the duplication isn't an issue because the @utility always overrides the original behavior.

.mx-4 {
  margin-inline: calc(var(--spacing) * 4);
}
.mx-4 {
  margin-inline: calc(var(--spacing-x) * 4);
}

These types of duplications are easily recognizable, as the previous declaration must contain the --spacing variant. Arbitrary values remain unaffected, because we didn't handle them separately within the @utility, so no duplication occurs there.

[efekurnaz]

Thank you @rozsazoltan.

I actually use --spacing(), my mistake on the initial post.

The foo I refer to actually not numbers but a t-shirt size scale.

A real life example:

@theme {
  --px-b-xs: --spacing(2);
  --px-b-sm: --spacing(3);
  --px-b-base: --spacing(4);
  --px-b-lg: --spacing(6);
  --px-b-xl: --spacing(8);
  --px-b-xxl: --spacing(12);

  --py-b-xs: --spacing(2);
  --py-b-sm: --spacing(3);
  --py-b-base: --spacing(4);
  --py-b-lg: --spacing(6);
  --py-b-xl: --spacing(8);
  --py-b-xxl: --spacing(12);
}

Then I need to

@utility px-b-xs {
  padding-inline: var(--px-b-xs);
}
@utility px-b-sm {
  padding-inline: var(--px-b-sm);
}
.
.
.
@utility py-b-xxl {
  padding-inline: var(--py-b-xxl);
}

With gaps and multiple scales it's around 48 utilities. It'd be convenient to just write the @theme part and be done with it.

As you've mentioned, @Utility override works here too but the requirement of the @Utility is the hassle.

[rozsazoltan]

Yeah, I understand you now, but in this case the situation is much better. Since with a functional utility you can declare a namespace, and on top of that you won't have any duplication.

• https://play.tailwindcss.com/tMazqNLPO7?file=css

@import "tailwindcss";

@theme {
  --px-b-xs: --spacing(2);
  --px-b-sm: --spacing(3);
  --px-b-base: --spacing(4);
  --px-b-lg: --spacing(6);
  --px-b-xl: --spacing(8);
  --px-b-xxl: --spacing(12);

  --py-b-xs: --spacing(2);
  --py-b-sm: --spacing(3);
  --py-b-base: --spacing(4);
  --py-b-lg: --spacing(6);
  --py-b-xl: --spacing(8);
  --py-b-xxl: --spacing(12);
}

@utility px-b-* {
  padding-inline: --value(--px-b-*);
}

@utility py-b-* {
  padding-block: --value(--py-b-*);
}

Note: I don't understand the ...-b-... part here; it can be omitted.

• https://play.tailwindcss.com/mhC34xedMo?file=css
• https://play.tailwindcss.com/PMwJdPSevl?file=css

Some reference for functional utilities:

• How to can create (functional) utilities with @utility without plugin
• Combining multiple utilities to avoid code duplication; attaching a prefix to --value due to utility name shortening

Some example with functional utility:

• Why not working {min-,max-,}w-screen-{breakpoint} following the pattern of {min-,max-,}w-{container_breakpoint}
• Readable cross-browser (webkit, moz) input slider styling using custom-variants

Some reference for v4:

• What's breaking changes from v4?
• https://www.reddit.com/r/tailwindcss/comments/1oe6pdt/comment/nkz4xim/
• https://www.reddit.com/r/tailwindcss/comments/1oe6pdt/comment/nlau4e5/

[efekurnaz]

oh this is nice, TIL, thank you!

Note: ...-b-... is a prefix for the block level scale. There's also an ...-s-... for the section level scale where numbers simply go up higher.

[rozsazoltan]

Then keep it in the namespace, but it's not needed in the functional utility, so you don't have to create a utility for every level. Just make sure the utility name doesn't include the -b- part either.

@theme {
  --px-b-xs: --spacing(2);
  --px-s-xs: --spacing(4);
  /* ... */

  --py-b-xs: --spacing(2);
  --py-s-xs: --spacing(4);
  /* ... */
}

@utility px-* {
  padding-inline: --value(--px-*);
}

@utility py-* {
  padding-block: --value(--py-*);
}

[efekurnaz]

Yes, worked wonders 🙏🏻

[efekurnaz]

Solved here: #19366 (reply in thread)