Allow !important on CSS variables

CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Ensure `not-*` does not remove `:is(…)` from variants ([#16825](https://github.com/tailwindlabs/tailwindcss/pull/16825))
 - Ensure `@keyframes` are correctly emitted when using a prefixed setup ([#16850](https://github.com/tailwindlabs/tailwindcss/pull/16850))
+- Allow `!important` on CSS variables again ([#16873](https://github.com/tailwindlabs/tailwindcss/pull/16873))
 
 ## [4.0.9] - 2025-02-25
 

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)

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;
     }