Fix z-*! utilities

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Vite: Don't crash when importing a virtual module in JavaScript that ends in `.css` ([#16780](https://github.com/tailwindlabs/tailwindcss/pull/16780))
 - Ensure `@reference "…"` does not emit CSS variables ([#16774](https://github.com/tailwindlabs/tailwindcss/pull/16774))
 - Fix an issue where `@reference "…"` would sometimes omit keyframe animations ([#16774](https://github.com/tailwindlabs/tailwindcss/pull/16774))
+- Ensure `z-*!` utilities are property marked as `!important` ([#16795](https://github.com/tailwindlabs/tailwindcss/pull/16795))
 
 ## [4.0.8] - 2025-02-21
 

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.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

@@ -98,13 +98,17 @@ test('variables in utilities should not be marked as important', async () => {
         }
         @tailwind utilities;
       `,
-      ['ease-out!'],
+      ['ease-out!', 'z-10!'],
     ),
   ).toMatchInlineSnapshot(`
     ":root, :host {
       --ease-out: cubic-bezier(0, 0, .2, 1);
     }
 
+    .z-10\\! {
+      z-index: 10 !important;
+    }
+
     .ease-out\\! {
       --tw-ease: var(--ease-out);
       transition-timing-function: var(--ease-out) !important;