Use CSS types instead of new Tailwind specificity for better language alignment

[brandonmcconnell]

Tailwind CSS v4's --value() syntax introduces types such as integer and percentage, among others (I don't see them all documented anywhere I can easily see in the official docs).

It might be beneficial, if it's feasible in terms of effort and performance, to refactor this approach to more closely align with the actual types already supported in the CSS language itself, which supports over 50 predefined types and also supports joins like small | medium | large and the combination of types like <length-percentage> (a type that can accept a length or a percentage as a value).

More documentation on that can be found here:

• CSS data types (comprehensive list of all CSS data types)
  • demonstrates combination of types (applicable to percentage types)
    • <length-percentage>
    • <frequency-percentage>
    • <angle-percentage>
    • <time-percentage>
• @property syntax
  • demonstrates how to join and clarify those types
    • A '|' combinator for multiple data types
      syntax: "<length> | <percentage>";
    • Space-separated list of values
      syntax: "<color>+";
    • Comma-separated list of values
      syntax: "<length>#";
    • Keywords
      syntax: "small | medium | large";
    • Combination of data type and keyword
      syntax: "<length> | auto";
    • Universal syntax value
      syntax: "*";
• Related specification: CSS Values and Units Module Level 4

Alternatively, Tailwind CSS could support the existing types as a faster and built-in types system but also allow for explicit CSS data types for greater specificity and type checking.

To quickly distinguish these types, Tailwind CSS could also employ the same type() function seen in Chromium/Blink's recent implementation of the long-awaited attr() function (specification | MDN).

Example:

Usage for common CSS data types:

<div data-foo="blue">test</div>
<style>
  div {
    color: attr(data-foo type(<color>), red); /* using type() */
  }
</style>

Not needed when parsing integers as CSS units:

<div data-size="10">test</div>
<style>
  div {
    font-size: attr(data-size px); /* NOT using type() */
  }
</style>

Read more about attr() here: Chrome for Developers > Blog > CSS attr() gets an upgrade

How this could look in Tailwind CSS v4

Instead of this:

@utility opacity-* {
  opacity: --value([percentage]);
  opacity: calc(--value(integer) * 1%);
  opacity: --value(--opacity-*);
}

One could write this:

@utility opacity-* {
  opacity: --value(<percentage>);
  opacity: calc(--value(<integer>) * 1%); /* support integers */
  opacity: calc(--value(<number>) * 1%); /* support integers and floats */
  opacity: --value(--opacity-*);
}

---

Thanks to @bramus for writing up such a good article on Chrome's new attr() function, which introduced some of the syntax core to this proposal.

[bramus]

Seems like a reasonable suggestion. For reference, the types CSS supports are specified in the https://drafts.csswg.org/css-values/ specification and syntax strings are specced in https://drafts.css-houdini.org/css-properties-values-api/#syntax-string.

As for px (which is called an <attr-unit>) that is allowed in attr(): that is a special case which acts as a short form of a more expanded version you could produce. E.g attr(size px) is the same as calc(attr(size type(<number>)) * 1px). It works for any CSS dimension unit or %.