Deployment on Vercel fails with “Missed semicolon” in globals.css under Tailwind v4

[Ka1Thakkar]

I’m experimenting with Tailwind v4 in a Next.js project and everything works locally—but every time I deploy to Vercel, the build crashes with:

Syntax error: tailwindcss: /vercel/path0/app/globals.css Missed semicolon

I’ve looked through GitHub issues and tried all of the suggested solutions, but nothing seems to resolve it in the Vercel environment.

Repository:
https://github.com/Ka1Thakkar/AI-Notes-App

[RobinMalfait]

Hey!

You have a class aspect-[9:16] which generates invalid CSS:

  .aspect-\[9\:16\] {
    aspect-ratio: 9:16;
  }

Change this to aspect-9/16 and it should solve your issue.

[JugglerX]

Had the same issue, never in a million years would I have suspected this was the cause. Changing aspect-[16:10] to aspect-[16/10] fixed it

[SyahmiRafsan]

Yes, did the trick for me too. Thanks buddy!