Background

I got this error on a fresh NextJS app running npx version 11.3.0 and NodeJS v24.1.0. After adding the command

npx shadcn@latest add calendar 

The Issue

## Error Type
Build Error

## Error Message
Parsing CSS source code failed

## Build Output
./app/globals.css:1414:20
Parsing CSS source code failed
  1412 | }
  1413 | .\[--cell-size\:--spacing\(8\)\] {
> 1414 |   --cell-size: var(--spacing(8));
       |                    ^
  1415 | }
  1416 |
  1417 | .file\:border-0::file-selector-button {

Unexpected token Function("--spacing")

Import trace:
  Client Component Browser:
    ./app/globals.css [Client Component Browser]
    ./app/layout.tsx [Server Component]

Next.js version: 16.1.6 (Turbopack)

This is caused by a conflict in the version of Tailwind which is using a function spacing which is only available on version 4. If you check your package.json you might see something like this.

"tailwindcss": "^3.4.1",

I’m running version 3 but the calendar component is using a version 4 function.

There are two options to fix this.

• Upgrade tailwind

npx @tailwindcss/upgrade@next

• Update the calendar component CSS
• instead of “[–cell-size:–spacing(8)]” use “[–cell-size:2rem]”

  className={cn(
        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
        className
      )}


Hope someone finds this issue useful.