Skip to content

Fix shadow-inherit, inset-shadow-inherit, drop-shadow-inherit, and text-shadow-inherit #17647

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

Merged
merged 5 commits into from
Apr 11, 2025

Conversation

wongjn
Copy link
Collaborator

@wongjn wongjn commented Apr 11, 2025

Fixes #17643.

This PR completely removes the color-mix() function for shadow-inherit. This does mean intensity and alpha channel support has been removed when using shadow-inherit1.

With intensity modifiers in #17398, all colors are wrapped in color-mix(). However, it seems inherit does not work as a value in color-mix() in Firefox or Chrome (don't have a means to test Safari).

Footnotes

  1. While writing this, I noticed other color utilities allow alpha channel modifier syntax for inherit - do we want to look at removing those too?

@wongjn wongjn requested a review from a team as a code owner April 11, 2025 08:49
@philipp-spiess
Copy link
Member

@wongjn Mind also fixing this for the other shadow types? https://play.tailwindcss.com/24BUkYoWNi 😬

@wongjn
Copy link
Collaborator Author

wongjn commented Apr 11, 2025

Your wish is my command 🫡

@wongjn wongjn force-pushed the fix-shadow-inherit branch from b1d722f to dfb352f Compare April 11, 2025 10:38
@philipp-spiess philipp-spiess changed the title Fix shadow-inherit Fix shadow-inherit, inset-shadow-inherit, drop-shadow-inherit, and text-shadow-inherit Apr 11, 2025
Copy link
Member

@philipp-spiess philipp-spiess left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sweeet, thanks man!

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Ensure the `color-mix(…)` polyfill creates fallbacks for theme variables that reference other theme variables ([#17562](https://github.com/tailwindlabs/tailwindcss/pull/17562))
- Fix brace expansion in `@source inline('z-{10..0}')` with range going down ([#17591](https://github.com/tailwindlabs/tailwindcss/pull/17591))
- Ensure container query variant names can contain hyphens ([#17628](https://github.com/tailwindlabs/tailwindcss/pull/17628))
- Ensure `shadow-inherit`, `inset-shadow-inherit`, `drop-shadow-inherit`, and `text-shadow-inherit` inherits the shadow color ([#17647](https://github.com/tailwindlabs/tailwindcss/pull/17647))
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah turns out it's 4, you added drop-shadow-inherit to that list but fixed it for inset-shadow-inherit. 🙈 I added a test for drop-shadow-inherit 👍

@philipp-spiess philipp-spiess merged commit 6d8dd82 into tailwindlabs:main Apr 11, 2025
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

shadow-inherit is broken
2 participants