-
-
Notifications
You must be signed in to change notification settings - Fork 4.8k
Adds default styles for [popover]
#17945
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adds default styles for [popover]
#17945
Conversation
@brandonmcconnell Hey! Thanks for the PR but I do think we should handle [popover] the same as <dialog>. For the latter we've been removing the margin explicitly and even mention it in the upgrade guides: #16372.
For colors and background colors, <dialog> also falls back to the default canvastext/canvas colors right now: https://play.tailwindcss.com/9Y4nGN0Kyk
So I wonder if the move here is to also mention that [popover] has its margin removed in the upgrade guide instead and not make any changes in preflight (these would be considered breaking changes too so landing them requires more care).
So the browser default styling actually breaks the styling (specifically inset) for non-dialog popovers.
Even if you were to change just the inset, I think that would be a huge improvement. Una Kravets has been fighting for this specifically:
https://x.com/una/status/1917662266427859202?s=46&t=spTB6QeQp6pscIFtkaMK7w
Something like this:
[popover]:not(dialog) { inset: auto; }
Uh oh!
There was an error while loading. Please reload this page.
This PR addresses existing preflight styles that break the default positioning of popover elements, as well as add some sensible default colors to override those set by the UA by default
margin: autoto maintain the expected centering for popovers.color: inheritfor more predictable text styles.background-color: transparentfor easier customization.The browser's defaults for these colors are
canvastextandcanvascolor, respectively, which is another option (to allow the UA styles to take precedence), but I think the inherit/transparent styles are more customizable by default, similar to how borders are removed from form controls when Tailwind CSS appliesappearance: noneto form controls, by default.Minimal repro: https://play.tailwindcss.com/jjyvteYH0n