Add suggestions when --spacing(--value(integer, number)) is used

[RobinMalfait]

This PR adds suggestions to CSS based functional utilities when the --spacing(…) function is used.

Given this CSS:

@import "tailwindcss";

@theme {
  --spacing: 0.25rem;
  --spacing-custom: 123px;
}

@utility with-custom-spacing-* {
  size: --value(--spacing);
}

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

@utility with-number-spacing-* {
  size: --spacing(--value(number));
}

And this HTML:

<div class="with-custom-spacing-custom"></div>
<div class="with-custom-spacing-0"></div>
<div class="with-custom-spacing-0.5"></div>
<div class="with-custom-spacing-1"></div>
<div class="with-custom-spacing-1.5"></div>

<div class="with-integer-spacing-custom"></div>
<div class="with-integer-spacing-0"></div>
<div class="with-integer-spacing-0.5"></div>
<div class="with-integer-spacing-1"></div>
<div class="with-integer-spacing-1.5"></div>

<div class="with-number-spacing-custom"></div>
<div class="with-number-spacing-0"></div>
<div class="with-number-spacing-0.5"></div>
<div class="with-number-spacing-1"></div>
<div class="with-number-spacing-1.5"></div>

Play: https://play.tailwindcss.com/tYDaSNiNtS

Then you will see the following suggestions:

[
  "with-custom-spacing-custom",

  "with-integer-spacing-0",
  "with-integer-spacing-1",
  "with-integer-spacing-2",
  "with-integer-spacing-3",
  "with-integer-spacing-4",
  "with-integer-spacing-5",
  "with-integer-spacing-6",
  "with-integer-spacing-7",
  "with-integer-spacing-8",
  "with-integer-spacing-9",
  "with-integer-spacing-10",
  "with-integer-spacing-11",
  "with-integer-spacing-12",
  "with-integer-spacing-14",
  "with-integer-spacing-16",
  "with-integer-spacing-20",
  "with-integer-spacing-24",
  "with-integer-spacing-28",
  "with-integer-spacing-32",
  "with-integer-spacing-36",
  "with-integer-spacing-40",
  "with-integer-spacing-44",
  "with-integer-spacing-48",
  "with-integer-spacing-52",
  "with-integer-spacing-56",
  "with-integer-spacing-60",
  "with-integer-spacing-64",
  "with-integer-spacing-72",
  "with-integer-spacing-80",
  "with-integer-spacing-96",

  "with-number-spacing-0",
  "with-number-spacing-0.5",
  "with-number-spacing-1",
  "with-number-spacing-1.5",
  "with-number-spacing-2",
  "with-number-spacing-2.5",
  "with-number-spacing-3",
  "with-number-spacing-3.5",
  "with-number-spacing-4",
  "with-number-spacing-5",
  "with-number-spacing-6",
  "with-number-spacing-7",
  "with-number-spacing-8",
  "with-number-spacing-9",
  "with-number-spacing-10",
  "with-number-spacing-11",
  "with-number-spacing-12",
  "with-number-spacing-14",
  "with-number-spacing-16",
  "with-number-spacing-20",
  "with-number-spacing-24",
  "with-number-spacing-28",
  "with-number-spacing-32",
  "with-number-spacing-36",
  "with-number-spacing-40",
  "with-number-spacing-44",
  "with-number-spacing-48",
  "with-number-spacing-52",
  "with-number-spacing-56",
  "with-number-spacing-60",
  "with-number-spacing-64",
  "with-number-spacing-72",
  "with-number-spacing-80",
  "with-number-spacing-96"
]

This is because --spacing(--value(number)) will include all default spacing scale suggestions we use. And --pacing(--value(integer)) will include the same list but without the floating point numbers.

Follow up PR for: #17304

[thecrypticace]

yessssss ty!

[katerlouis]

@RobinMalfait (sorry, probably trivial...)
This merge has not been released yet, correct? At least for me on the latest version these utilities do not trigger suggestions. The play-link you provided also does not offer suggestions yet.

Sorry for the trivial noob questions; but I'm having a hard time wrapping my head around the new plugin system and want to make sure that it's not working for me, because it just can't yet :D:D – Any way for me to see if this PR has been released yet?

EDIT: Also I don't quite get why your HTML examples show with-custom-spacing-2 while the suggestion apparently only shows the custom spacings? Will with-custom-spacing-2 still give you the desired css, just without suggestion?

EDIT2: Also also :D – cool that this system easily allows to only suggest custom values <3

EDIT3...: It feels a bit odd that both --value(--spacing) and --spacing(--value(integer)) works; --spacing and --spacing() is a different thing, isn't it? Will --spacing(...) as a function (I guess?) be auto-suggested in @utility ... alongside --value() and --modifier()?

EDIT4: Proof that I'm not crazy :D

[RobinMalfait]

@katerlouis

@RobinMalfait (sorry, probably trivial...) This merge has not been released yet, correct? At least for me on the latest version these utilities do not trigger suggestions. The play-link you provided also does not offer suggestions yet.

Correct it's not yet released. You have to be on the insiders build in order to get suggestions. If you switch the Play link to use the insiders version it should work. See: https://play.tailwindcss.com/VaNteSLX3A

Sorry for the trivial noob questions; but I'm having a hard time wrapping my head around the new plugin system and want to make sure that it's not working for me, because it just can't yet :D:D – Any way for me to see if this PR has been released yet?

Yep, checkout the CHANGELOG.md file for this: https://github.com/tailwindlabs/tailwindcss/blob/main/CHANGELOG.md#unreleased

EDIT: Also I don't quite get why your HTML examples show with-custom-spacing-2 while the suggestion apparently only shows the custom spacings? Will with-custom-spacing-2 still give you the desired css, just without suggestion?

I just copied the 3 types of plugins with the exact same values. Then verified what actually got generated (see Generated CSS tab at the bottom).

Let me annotation it for you: https://play.tailwindcss.com/ZiGsqoXgwV

EDIT2: Also also :D – cool that this system easily allows to only suggest custom values <3

EDIT3...: It feels a bit odd that both --value(--spacing) and --spacing(--value(integer)) works; --spacing and --spacing() is a different thing, isn't it?

It is a bit odd, but this is how CSS defines custom functions, they just look like a CSS variable.

• --value(--spacing) means: read values defined with --spacing-*: …
• --spacing(--value(integer)) means: use the --spacing() function, and read any bare value integer. So foo-123 would have a bare value of 123.

In this case --spacing(x) is a helper that generates calc(var(--spacing) * x). Where var(--spacing) is set to --spacing: 0.25rem by default.

Will --spacing(...) as a function (I guess?) be auto-suggested in @utility ... alongside --value() and --modifier()?

Yes, should already be the case:

EDIT4: Proof that I'm not crazy :D

Correct, just need to be on the correct version 😁

[katerlouis]

@RobinMalfait I'm sorry to bother you again, but I'm about to pull my hair out..
I have tailwind 4.1.1 installed; I also did $ npm ci; I then did restart my VS Code and the computer... and I still do't get the suggestions to work

Proof I have the correct version of tailwindcss

Copy and pasted the exact utility you used

Proof that the utility is being loaded and does what its supposed to do

But still without any suggestions :O

Do you have any idea what's going on here?

[RobinMalfait]

Hmm, can you reproduce it in a small reproduction repo and share it?

[katerlouis]

Hmm, can you reproduce it in a small reproduction repo and share it?

You are too good and thorough! I "solved it" (it rather solved itself) – but you were too quick to reply; so now I can't delete my comment.

What did change? Honestly... I don't know for sure, but after clearing npm cache, removing node_modules, package-lock.json to reoslve an unrelated peer dependency... its now working! 🤷

Thanks for the very quick reply and your willingness to help <3 – much appreciated