--default() should accept shorthand values

[apostolos]

When defining a default for a value or modifier, it would be useful to be able to pass shorthand values.

For example:

@theme inline {
  --text-box-trim-start: trim-start;
  --text-box-trim-end: trim-end;
  --text-box-trim-both: trim-both;

  --text-box-edge-cap: cap alphabetic;
  --text-box-edge-cap-text: cap text;
  --text-box-edge-ex: ex alphabetic;
  --text-box-edge-ex-text: ex text;
  --text-box-edge-text: text alphabetic;
  --text-box-edge-text-text: text text;
}
@utility trim-* {
  text-box: --value('normal', 'inherit', 'initial', 'revert', 'revert-layer', 'unset');
  text-box: --value(--text-box-trim-*) --modifier(--text-box-edge-*, --default(box alphabetic));
}

Current implementation removes the space, producing an invalid CSS value:

<div className="trim-both" />

.trim-both {
 text-box: trim-both boxalphabetic;
}

A workaround is to use the custom property as value:

@utility trim-* {
  text-box: --value('normal', 'inherit', 'initial', 'revert', 'revert-layer', 'unset');
  text-box: --value(--text-box-trim-*) --modifier(--text-box-edge-*, --default(var(--text-box-edge-cap)));
}

But this of course uses the custom property in the generated CSS, instead of the literal value, which is less than ideal:

.trim-both {
 text-box: trim-both var(--text-box-edge-cap) /* cap alphabetic */;
}

[RobinMalfait]

Hmm, the values provided to --default(…) should be considered a literal value. So this feels like a bug to me. Will create an issue for this instead.

[RobinMalfait]

Created an issue and a PR:

• --default() should emit values as-is #20391
• --default(…) should emit values as-is #20392

[RobinMalfait]

Alright, that should be fixed by #20392, and will be available in the next release.

You can already try it by using the insiders build:
CLI:

npm install tailwindcss@insiders @tailwindcss/cli@insiders

PostCSS:

npm install tailwindcss@insiders @tailwindcss/postcss@insiders

Vite:

npm install tailwindcss@insiders @tailwindcss/vite@insiders

webpack:

npm install tailwindcss@insiders @tailwindcss/webpack@insiders

[apostolos]

Amazing, thank you!