h-[--header-height] Not Working, Requires h-[var(--header-height)] for Proper Functionality

[LetsOr2]

Description:

In the documentation for the sidebar block, there is an issue where the h-[--header-height] class does not work as expected in a local Tailwind setup. However, in the v0 documentation server, it appears to work without additional configuration.

Affected Files:

components/app-sidebar.tsx (line 158)

className="top-[--header-height] !h-[calc(100svh-var(--header-height))]"

components/site-header.tsx (line 23)

<div className="flex h-[--header-height] w-full items-center gap-2 px-4">

Issue:

The h-[--header-height] class does not work in my local environment, but replacing it with h-[var(--header-height)] makes it work correctly.

In the v0 documentation server, it seems to work without needing changes.

Environment:

• Tailwind CSS version: ^4.0.14
• React version: ^19.0.0
• Browser: Google Chrome 134.0.6998.118

Question:

Is this behavior expected due to a required Tailwind configuration, or should h-[--header-height] work without modification? If any specific configuration is required, could it be documented?

Additional Issue: top-[var(--header-height)] Not Working in sm Screens

On sm screens, the sidebar does not stay positioned below the header.