[popover] add polyfill support for :popover-open

[eloyesp]

Currently on v4-beta8, the class open:visible is transformed on the following css:

.open\:visible {
  &:is([open], :popover-open) {
    visibility: visible;
  }
}

I would use this instead to make it compatible with a still required polyfill.

.open\:visible {
  &:is([open], :popover-open, .\:popover-open) {
    visibility: visible;
  }
}

I'm not sure if there is a better place to add this change than on tailwind itself, or how easy would be to fix that on the config.

[glori923]

Hello,

To incorporate the desired change for compatibility with your polyfill in Tailwind CSS, there are a few approaches you can take, depending on whether you want to extend Tailwind's default behavior or modify your custom configuration. Here’s how you can achieve it:
progressive for agents only
Option 1: Modify Tailwind Configuration Using extend
You can add the custom CSS directly in your Tailwind configuration file (tailwind.config.js) using the extend option to avoid modifying Tailwind's source code. Here's how:

javascript
// tailwind.config.js
module.exports = {
theme: {
extend: {
// No changes needed here for your case
},
},
plugins: [
function({ addVariant }) {
addVariant('open-visible', '&:is([open], :popover-open, .\:popover-open)');
},
],
};
Now, you can use the open-visible variant directly in your Tailwind utility classes:

html

...

Option 2: Use Tailwind's @layer to Define Custom Styles You can define the custom styles in your CSS directly using the @layer directive. This method is useful if you don’t want to touch the Tailwind configuration file.

css
@tailwind components;
@tailwind utilities;

@layer utilities {
.open:visible {
&:is([open], :popover-open, .:popover-open) {
visibility: visible;
}
}
}
Place this in a CSS file processed by Tailwind.

Option 3: Fork and Modify Tailwind Source (Not Recommended)
If you want this directly in Tailwind's default implementation (not recommended as it adds maintenance overhead), you could fork the Tailwind repo, modify the relevant CSS, and use your custom version. However, this is unnecessary since Tailwind provides sufficient hooks for customization.

Best Regards