Severity variants using data-p~= selector instead of data-p-severity=

[msazzuhair]

Description

I am trying to use the severity prop in my Button component (e.g., severity="warn"). However, I noticed that the custom variant selectors refer to data-p~="warn" instead of using data-p-severity="warn" directly. Is this intended behavior for the DX?

You can find the relevant code here.

Environment

• Package version: tailwindcss-primeui v0.6.1
• Tools: Volt/Tailwind CSS

Steps to Reproduce

1. Install tailwindcss-primeui v0.6.1.
2. Add the class passthrough to the button component (root) using the custom variant p-{severity}.

[msazzuhair]

I fixed it on my project by adding the following lines to my main.css:

@custom-variant p-success (&[data-p-severity="success"]);
@custom-variant p-info (&[data-p-severity="info"]);
@custom-variant p-warn (&[data-p-severity="warn"]);
@custom-variant p-danger (&[data-p-severity="danger"]);
@custom-variant p-secondary (&[data-p-severity="secondary"]);
@custom-variant p-contrast (&[data-p-severity="contrast"]);

Should this fix be integrated into tailwindcss-primeui or should it be self-maintained on a per-project basis?