No description
8d00534823
This PR changes how shadow color and shadow size utilities interact when used with variants. Take this HTML: ```html <div class="shadow-lg shadow-red-500 hover:shadow-xl"> <!-- … --> </div> ``` Currently this shadow would be red by default, but revert to the default semi-transparent black color on hover. This PR changes this behavior such that the shadow remains red on hover, and only the shadow size changes. We deliberately didn't do this originally because making things behave this way makes it very difficult to get the default shadow color back once you've changed it. The default color for `shadow-xl` for instance is `rgb(0 0 0 / 0.1)`, and the only way to get that color back after changing it is to know that value and explicitly bring it back: ```html <div class="shadow-lg shadow-red-500 hover:shadow-xl hover:shadow-black/10"> <!-- … --> </div> ``` To make things more difficult, the default shadow color is not the same across shadow sizes. For `shadow-sm` it's `black/5`, and for `shadow-2xl` it's `black/25`. In practice though you basically never need to bring back the default shadow color, so I'm reconsidering this trade-off in v4, and think I prefer this new behavior where the color is preserved but you have to bring back the default color if you actually need it. A simple workaround if you don't know the color is to reset the `--tw-shadow-color` variable like this: ```html <div class="shadow-lg shadow-red-500 hover:shadow-xl hover:[--tw-shadow-color:initial]"> <!-- … --> </div> ``` This relies on semi-private internals though, so perhaps we can introduce a utility for this, like `shadow-default` or `shadow-initial` that just unsets the shadow color. --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> |
||
|---|---|---|
| .github | ||
| crates | ||
| integrations | ||
| packages | ||
| patches | ||
| playgrounds | ||
| scripts | ||
| .gitattributes | ||
| .gitignore | ||
| .npmrc | ||
| .prettierignore | ||
| Cargo.lock | ||
| Cargo.toml | ||
| CHANGELOG.md | ||
| LICENSE | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| rust-toolchain.toml | ||
| turbo.json | ||
| vitest.workspace.ts | ||
A utility-first CSS framework for rapidly building custom user interfaces.
Documentation
For full documentation, visit tailwindcss.com.
Community
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
Discuss Tailwind CSS on GitHub
For chatting with others using the framework:
Join the Tailwind CSS Discord Server
Contributing
If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.