See the "Show" button underneath and to the right of "Open modal" on https://fresh-rfui-test.deno.dev/islands.
I have:
<button type="button" class="bg-neutral-50 px-2">Show</button>
and two stylesheets:
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>fresh-rfui-test</title>
<link rel="stylesheet" href="https://rfui.deno.dev/rfui-v0-1-11.css" />
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<Component />
</body>
</html>
rfui-v0-1-11.css comes before styles.css.
styles.css has:
[type=button],
[type=reset],
[type=submit],
button {
-webkit-appearance:button;
background-color:transparent;
background-image:none
}
The background-color is being set to transparent because of this.
But rfui-v0-1-11.css has:
.bg-neutral-50 {
--tw-bg-opacity:1;
background-color:rgb(var(--color-neutral-50)/var(--tw-bg-opacity))
}
I don't understand why that selector doesn't take precedence and why it's value of background-color doesn't get applied.
Here's how I'm thinking about it.
- I refer to these docs for the cascading order.
- For "1. Relevance", both selectors match the
<button>and thus don't get filtered out. - For "2. Origin and importance", they're both the same. Both have an origin of "author (developer)" and an importance of "normal".
- For "3. Specificity",
.bg-neutral-50has a higher specificity than[type=button].0-1-0vs0-0-1. So then,.bg-neutral-50should take precedence and have it's value forbackground-colorapplied.
The docs you linked to say:
Both
.bg-neutral-50and[type=button]fall into this category, so both of the selectors have specificity 0-1-0. This can be seen in Safari or Chrome dev tools by hovering on the selector: