optimizeUniversalDefaults: true breaks shadows
#14426
Comments
|
Good catch! Fix here, just need to update a bunch of tests and tag a patch 👍 |
adamwathan
added a commit
that referenced
this issue
Sep 17, 2024
Prior to this PR, we'd put all of the `@defaults` (the CSS variables and stuff) _after_ the `base` rules. This creates an issue when using `optimizeUniversalDefaults` with CSS that looks like this: ```css @tailwind base; @tailwind components; @tailwind utilities; @layer base { input { @apply shadow; } } ``` …because the default shadow stuff ends up after the base `input` rules, so the generated styles are like this: ```css input { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } input { --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; } ``` This means all of the actual shadow values for the input are reset and the shadow doesn't work. Fixes #14426. Lots of failing tests right because this changes a ton of stuff, albeit in a totally inconsequential way. @thecrypticace if you could update these for me this week that would be a huge help, just banging this fix out quick while the kids are napping 😴 --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Co-authored-by: Jordan Pittman <jordan@cryptica.me>
|
Merged the fix, will get a patch tagged today 👍 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Reproduction URL
https://play.tailwindcss.com/JN9kLsgnWE
Describe your issue
Using
optimizeUniversalDefaults: trueadds css var overrides that remove shadows (when used inbaselayer)The text was updated successfully, but these errors were encountered: