Add suggestions when `--spacing(--value(integer, number))` is used by RobinMalfait · Pull Request #17308 · tailwindlabs/tailwindcss

RobinMalfait · 2025-03-20T18:51:43Z

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!

@theme

Output is based on the result of: CSS: ```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)); } ``` HTML: ```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

- When `--value(--spacing)` is used, then `--spacing` theme key suggestions will be used. - When `--spacing(--value(integer))` is used, then `--spacing` scale suggestions will be used, but _only_ for `integer` values. - When `--spacing(--value(number))` is used, then `--spacing` scale suggestions will be used, but for all values.

katerlouis · 2025-03-24T20:41:46Z

@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 · 2025-03-24T23:09:06Z

@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 · 2025-04-03T16:39:45Z

@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 · 2025-04-03T16:57:36Z

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

katerlouis · 2025-04-03T17:39:17Z

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

RobinMalfait requested a review from a team as a code owner March 20, 2025 18:51

thecrypticace approved these changes Mar 20, 2025

View reviewed changes

RobinMalfait force-pushed the feat/detect-spacing-fn-in-value-or-modifier-fn branch from 8a00834 to d54b2d0 Compare March 20, 2025 18:58

Base automatically changed from feat/allow-literal-in-modifier to main March 20, 2025 19:02

RobinMalfait added 4 commits March 20, 2025 20:02

hoist default spacing suggestions

0cb043f

update changelog

ae89775

RobinMalfait force-pushed the feat/detect-spacing-fn-in-value-or-modifier-fn branch from d54b2d0 to ae89775 Compare March 20, 2025 19:02

RobinMalfait enabled auto-merge (squash) March 20, 2025 19:04

RobinMalfait merged commit 250c843 into main Mar 20, 2025
6 checks passed

RobinMalfait deleted the feat/detect-spacing-fn-in-value-or-modifier-fn branch March 20, 2025 19:06

davidwebca mentioned this pull request Mar 27, 2025

column-count support #540

Closed

fossabot bot mentioned this pull request Oct 25, 2025

chore(deps-dev): bump tailwindcss from 3.4.18 to 4.1.16 WhizUs-Labs/kcd-showcase-trw-demo-app#28

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

Add suggestions when `--spacing(--value(integer, number))` is used#17308
RobinMalfait merged 4 commits intomainfrom
feat/detect-spacing-fn-in-value-or-modifier-fn

RobinMalfait commented Mar 20, 2025 •

edited

Loading

Uh oh!

thecrypticace left a comment

Uh oh!

Uh oh!

katerlouis commented Mar 24, 2025 •

edited

Loading

Uh oh!

RobinMalfait commented Mar 24, 2025 •

edited

Loading

Uh oh!

katerlouis commented Apr 3, 2025 •

edited

Loading

Uh oh!

RobinMalfait commented Apr 3, 2025

Uh oh!

katerlouis commented Apr 3, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

RobinMalfait commented Mar 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thecrypticace left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

katerlouis commented Mar 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

RobinMalfait commented Mar 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

katerlouis commented Apr 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

RobinMalfait commented Apr 3, 2025

Uh oh!

katerlouis commented Apr 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

RobinMalfait commented Mar 20, 2025 •

edited

Loading

katerlouis commented Mar 24, 2025 •

edited

Loading

RobinMalfait commented Mar 24, 2025 •

edited

Loading

katerlouis commented Apr 3, 2025 •

edited

Loading

katerlouis commented Apr 3, 2025 •

edited

Loading