Fix remove !important on CSS variable declarations

CHANGELOG.md

@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - _Experimental_: Add `user-valid` and `user-invalid` variants ([#12370](https://github.com/tailwindlabs/tailwindcss/pull/12370))
 
+### Fixed
+
+- Remove invalid `!important` on CSS variable declarations ([#16668](https://github.com/tailwindlabs/tailwindcss/pull/16668))
+
 ## [4.0.7] - 2025-02-18
 
 ### Fixed

packages/tailwindcss/src/compile.ts

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

packages/tailwindcss/src/important.test.ts

@@ -1,5 +1,6 @@
 import { expect, test } from 'vitest'
 import { compile } from '.'
+import { compileCss } from './test-utils/run'
 
 const css = String.raw
 
@@ -87,3 +88,31 @@ test('Utilities can be wrapped with a selector and marked as important', async (
     "
   `)
 })
+
+test('variables in utilities should not be marked as important', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --ease-out: cubic-bezier(0, 0, 0.2, 1);
+        }
+        @tailwind utilities;
+      `,
+      ['ease-out!'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --ease-out: cubic-bezier(0, 0, .2, 1);
+    }
+
+    .ease-out\\! {
+      --tw-ease: var(--ease-out);
+      transition-timing-function: var(--ease-out) !important;
+    }
+
+    @property --tw-ease {
+      syntax: "*";
+      inherits: false
+    }"
+  `)
+})