[V4] How to create custom functional utility with spacing variables and auto suggest in vs code?

[katerlouis]

class="mt-... triggers intellisense to suggest values with 0-96.

I now want to create a custom utility using the new system that also suggests the same permutations.

But the docs for functional utilities (https://tailwindcss.com/docs/adding-custom-styles#functional-utilities) fail to mention how to do that.

@utility foobar-* {
  padding-left: --value(--spacing-*); // does not work
  padding-right: --spacing(*); // does not work
  padding-top: --spacing(4); // does work, but obviously ignores the utilities parameter
  padding-bottom: --spacing(--value(integer)); // does sorta work, but fails to auto suggest like `mt-*` does
}

custom --spacing tokens like in v3 dont seem to be a thing anymore 🤷

It feels like this should be trivial and I must be missing something very obvious.

Would appreciate the help!

[wongjn]

--value(--spacing-*) should work, but only if you have any theme variables with --spacing- namespace prefix (there are none by default).

--spacing(--value(integer)) should also work, but I'd expect no intellisense. There doesn't seem to be any support for suggestions for custom utilities with bare values like this.

https://play.tailwindcss.com/K0WjuajbcV

[wongjn]

Surely there's a way how I can use the same suggested spacing values as those utilities do, right?

Not that I've seen. It looks like Tailwind uses an internal API to create suggestions for the core spacing values.

Do you know what tailwinds core uses under the hood to create the spacing steps used by mt- etc.?

Yes, a hardcoded list:

tailwindcss/packages/tailwindcss/src/utilities.ts

Lines 32 to 67 in e8715d0

	const DEFAULT_SPACING_SUGGESTIONS = [
	'0',
	'0.5',
	'1',
	'1.5',
	'2',
	'2.5',
	'3',
	'3.5',
	'4',
	'5',
	'6',
	'7',
	'8',
	'9',
	'10',
	'11',
	'12',
	'14',
	'16',
	'20',
	'24',
	'28',
	'32',
	'36',
	'40',
	'44',
	'48',
	'52',
	'56',
	'60',
	'64',
	'72',
	'80',
	'96',
	]

Which is referenced in spacingUtility() in its suggest() call:

tailwindcss/packages/tailwindcss/src/utilities.ts

Lines 514 to 521 in e8715d0

	suggest(name, () => [
	{
	values: theme.get(['--spacing']) ? DEFAULT_SPACING_SUGGESTIONS : [],
	supportsNegative,
	supportsFractions,
	valueThemeKeys: themeKeys,
	},
	])

Which is used by spacing utilities, e.g. margin:

tailwindcss/packages/tailwindcss/src/utilities.ts

Lines 818 to 833 in e8715d0

	for (let [namespace, property] of [
	['m', 'margin'],
	['mx', 'margin-inline'],
	['my', 'margin-block'],
	['ms', 'margin-inline-start'],
	['me', 'margin-inline-end'],
	['mt', 'margin-top'],
	['mr', 'margin-right'],
	['mb', 'margin-bottom'],
	['ml', 'margin-left'],
	] as const) {
	staticUtility(`${namespace}-auto`, [[property, 'auto']])
	spacingUtility(namespace, ['--margin', '--spacing'], (value) => [decl(property, value)], {
	supportsNegative: true,
	})
	}

[katerlouis]

Thanks a tooon for this detailed and easy to understand rundown.
Interesting to see that they internally are prepared to use --spacing variables, although the default theme does not use them; the docs also don't mention them.

I'm surprised tailwind does not provide a solution to hook into the same system using the new css @utility declaration. Feels like a step backwards from v3. I know that (as of right now at least?) "legacy" javascript plugins are still working, but they clearly want to push the new syntax. And I also like the simplicity of it 🤷

Do you know if this is something they are still working on?

[wongjn]

I've not seen anything pertaining to intellisense suggestions.

[RobinMalfait]

We merged some features recently for exactly this use case: #17308

But we don't have any APIs yet for your own suggestions.

[katerlouis]

@RobinMalfait Great news! (I guess? :D) – What exactly do you mean by "own suggestions"? It looks like #17308 covers exactly what I want, doesn't it?

(also cool to see that my trial and error of --spacing(--value(integer)) is exactly what ended up being the solution in your PR; speaks for the new system if it can be deduced that easily. That being said, the docs for functional utilities lack a lot of information (for noobs like me at least) – i.e. a list of all available types would be helpful; I wouldn't have figured out that number also exists.

[wongjn]

I would think "own suggestions" to mean custom-defined values outside the DEFAULT_SPACING_SUGGESTIONS list.

[RobinMalfait]

Yep this should cover your exact use case. I just meant that in a general sense we don't have any kind of suggest API in CSS like the one we use internally.

[katerlouis]

I see; while probably useful at some point to specify your very own SPACING_SUGGESTIONS list, I think this is much more of an edge case compared to hooking into what mt-* etc. does. And as a workaround you could add custom --spacing- variables in @theme 🤷