Unexpected token Curly Bracket Block at [project]/styles/globals.css:6:54291

[kamalxdev]

I tried upgrading tailwind from v3 to v4 by using this command npx @tailwindcss/upgrade and also updated all the required dependencies.
Now i'm getting this error in the globals.css file

Parsing css source code failed
  5 |     );--default-mono-font-variation-settings:var(
  6 |       --font-mono--font-variation-settings
> 7 |     );--color-transparent:var(--op-transparent);--color-black:var(--op-black);--color-white:var(--op-white);--color-primary:var(--op-text-primary);--color-secondary:var(--op-text-secondary);--color-hovered:var(--op-surface-hovered);--color-pressed:var(--op-surface-pressed);--text-color:var(--op-text);--text-color-default:var(--op-text);--text-color-strong:var(--op-text-strong);--text-color-soft:var(--op-text-soft);--text-color-disabled:var(--op-text-disabled);--text-color-critical:var(--op-text-critical);--text-color-warning:var(--op-text-warning);--text-color-success:var(--op-text-success);--text-color-primary:var(--op-text-primary);--text-color-secondary:var(--op-text-secondary);--text-color-on-primary:var(--op-text-on-primary);--text-color-on-secondary:var(--op-text-on-secondary);--text-color-icon:var(--op-icon);--text-color-icon-strong:var(--op-icon-strong);--text-color-icon-soft:var(--op-icon-soft);--text-color-icon-disabled:var(--op-icon-disabled);--text-color-icon-critical:var(--op-icon-critical);--text-color-icon-warning:var(--op-icon-warning);--text-color-icon-success:var(--op-icon-success);--text-color-icon-primary:var(--op-icon-primary);--text-color-icon-secondary:var(--op-icon-


Unexpected token Curly Bracket Block at [project]/styles/globals.css:6:54291

[wongjn]

Please provide a git repo that reproduces the issue, so we can debug.

[FinaritrAndrianiaina]

If you are using next.js and use --turbopack for the dev server, you'll need to remove it. Had the same error and removing it fixed it for me.

[jemmmmmmmm]

Currently having the same issues. Dont know what to do other than removing --turbopack

 ⨯ ./src/app/globals.css:263:15
Parsing css source code failed
  261 |   }
  262 |   .h-\[\$\{height\}px\] {
> 263 |     height: ${height}px;
      |               ^
  264 |   }
  265 |   .h-full {
  266 |     height: 100%;

Unexpected token CurlyBracketBlock at [project]/src/app/globals.css:262:14

[wongjn]

You're using invalid Tailwind syntax, h-[${height}px], somewhere in your code. See the documentation for details.

[macthom989]

I had the same error, and also removed turpopack and all worked fine again

[macthom989]

Before:
"dev": "next dev --turpopack --experimental-https",
After
"dev": "next dev --experimental-https",

[romhenri]

Before: "dev": "next dev --turpopack --experimental-https", After "dev": "next dev --experimental-https",

Same here.

[isarmstrong]

I seriously thought I was loosing my mind. I think I over-engineered the abssolute hell out of my tokens-to-tailwind pipeline trying to debug a template literal before I found this thread.