archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Allow !important on CSS variables (#16873)

Browse Source 
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
This commit is contained in:
Robin Malfait 2025-03-04 17:21:56 +01:00 committed by GitHub
parent db405304f4
commit 57b080c5f2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 3 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Ensure `@keyframes` are correctly emitted when using a prefixed setup ([#16850](https://github.com/tailwindlabs/tailwindcss/pull/16850))
- Don't swallow `@utility` declarations when `@apply` is used in nested rules ([#16940](https://github.com/tailwindlabs/tailwindcss/pull/16940))
- Ensure `outline-hidden` behaves like `outline-none` in non-`forced-colors` mode ([#](https://github.com/tailwindlabs/tailwindcss/pull/))
- Allow `!important` on CSS variables again ([#16873](https://github.com/tailwindlabs/tailwindcss/pull/16873))
## [4.0.9] - 2025-02-25

2
packages/tailwindcss/src/compile.ts
View File

@ -304,7 +304,7 @@ function applyImportant(ast: AstNode[]): void {
continue
}
if (node.kind === 'declaration' && !(node.property[0] === '-' && node.property[1] === '-')) {
if (node.kind === 'declaration') {
node.important = true
} else if (node.kind === 'rule' || node.kind === 'at-rule') {
applyImportant(node.nodes)

2
packages/tailwindcss/src/important.test.ts
View File

@ -110,7 +110,7 @@ test('variables in utilities should not be marked as important', async () => {
}
.ease-out\\! {
--tw-ease: var(--ease-out);
--tw-ease: var(--ease-out) !important;
transition-timing-function: var(--ease-out) !important;
}