@property

[IranMine123]

Hello, I just sent this link it explains the feature completely. please add this to tailwind. tysm

CSS Custom Properties

https://developer.mozilla.org/en-US/docs/Web/CSS/@property

The @Property CSS at-rule is part of the CSS Houdini umbrella of APIs. It allows developers to explicitly define their CSS custom properties, allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not.
The @Property rule represents a custom property registration directly in a stylesheet without having to run any JS. Valid @Property rules result in a registered custom property, as if registerProperty() had been called with equivalent parameters.

Syntax

@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

[lukewarlow]

What would the API for this look like for you? It's a rather complicated syntax I can't see how Tailwind could add something ergonomic for this nor can I really think how it would be useful.

[cod3blox]

@Property enables to interpolate custom properies. It is a really nice option.
Examples: We can finally animate CSS gradient

[jshmllr]

I just read about this this morning too! *bump

[lukewarlow]

It's still unclear to me how people would want this to work within tailwind?

[alex-krasikau]

The @Property doesn't belong to any element in the DOM, and it feels inappropriate to add it as a utility class. However, it is possible to use @Property in the CSS, which doesn't have any downsides or deviations from the Tailwind ideas.

@tailwind base;
@tailwind components;
@tailwind utilities;

@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}