No description
57b080c5f2
We recently fixed an issue (https://github.com/tailwindlabs/tailwindcss/issues/16664) so that we could remove the `!important` on CSS variables. The reason we did that is because Google Chrome is showing a warning in the devtools styles panel that this is invalid. However, this _is_ valid and the code actually works as expected. If we look at the CSS spec for this: > Note: Custom properties can contain a trailing `!important`, but this is automatically removed from the property’s value by the CSS parser, and makes the custom property "important" in the CSS cascade. In other words, the prohibition on top-level "!" characters does not prevent `!important` from being used, as the `!important` is removed before syntax checking happens. > > — https://www.w3.org/TR/css-variables-1/#syntax So given this input: ```css @import "tailwindcss"; body { --text-color: var(--color-white) !important; --bg-color: var(--color-blue-950) !important; /* Direct usage */ background-color: var(--bg-color); /* Usage inside other functions as-if the `!important` is in the middle instead of the end */ color: color-mix(in oklab, var(--text-color) 75%, transparent); } ``` You will notice that everything works as expected, but if you look at the Styles panel in Chrome for the `<body>` element, you will see an incorrect warning. (At least that's what you used to see, I updated Chrome and everything renders fine in devtools). Play: https://play.tailwindcss.com/BpjAJ6Uxg3?file=css This change reverts the "fix" for: https://github.com/tailwindlabs/tailwindcss/issues/16664. @winchesHe you were the original person that opened the issue so this info might be useful to you as well. Can you verify that the Play link above does work as expected for you? Fixes: #16810 |
||
|---|---|---|
| .github | ||
| crates | ||
| integrations | ||
| packages | ||
| patches | ||
| playgrounds | ||
| scripts | ||
| .gitignore | ||
| .npmrc | ||
| .prettierignore | ||
| Cargo.lock | ||
| Cargo.toml | ||
| CHANGELOG.md | ||
| LICENSE | ||
| mise.toml | ||
| 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.