Allow !important on CSS variables (#16873)

RobinMalfait · web-flow · commit 57b080c5f2b2 · 2025-03-04T16:21:56.000Z
We recently fixed an issue (#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: #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
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -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
 
diff --git a/packages/tailwindcss/src/compile.ts b/packages/tailwindcss/src/compile.ts
@@ -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)
diff --git a/packages/tailwindcss/src/important.test.ts b/packages/tailwindcss/src/important.test.ts
@@ -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;
     }
 

Original file line number	Diff line number	Diff line change
`@@ -304,7 +304,7 @@ function applyImportant(ast: AstNode[]): void {`
`304`	`304`	`continue`
`305`	`305`	`}`
`306`	`306`
`307`		`- if (node.kind === 'declaration' && !(node.property[0] === '-' && node.property[1] === '-')) {`
	`307`	`+ if (node.kind === 'declaration') {`
`308`	`308`	`node.important = true`
`309`	`309`	`} else if (node.kind === 'rule' \|\| node.kind === 'at-rule') {`
`310`	`310`	`applyImportant(node.nodes)`
Original file line number	Diff line number	Diff line change
`@@ -110,7 +110,7 @@ test('variables in utilities should not be marked as important', async () => {`
`110`	`110`	`}`
`111`	`111`
`112`	`112`	`.ease-out\\! {`
`113`		`- --tw-ease: var(--ease-out);`
	`113`	`+ --tw-ease: var(--ease-out) !important;`
`114`	`114`	`transition-timing-function: var(--ease-out) !important;`
`115`	`115`	`}`
`116`	`116`