<!--
title: Tailwind v4 Z Syntax
domain: app-frameworks
topic: Naming Conventions
language: TSX
source: opencut-app/opencut
updated: 2025-07-31
url: https://awesomereviewers.com/reviewers/opencut-tailwind-v4-z-syntax/
-->

When using Tailwind CSS v4, follow the v4-supported utility syntax for z-index and similar numeric utilities. Prefer the non-bracket form `z-<number>` (e.g., `z-150`, `z-200`) instead of `z-[<number>]`; the JIT compiler will handle arbitrary numeric values and won’t drop these classes.

Example:
```tsx
<div className="absolute pointer-events-auto z-150" />
<ContextMenuContent className="z-200" />
```
