NextJS Tailwind Global.css parsing failure - removed issue but still unable to parse

Question

I added some code into a tsx file that was trying to do a dynamic colour in Tailwind. However, when I tried to run it,it failed. I removed the code, but the global.css still fails to parse and I don't know how to re-parse the css.

In my tsx I had the following line for styling a div. The brewery.breweryType.colour is a string of a colour, e.g. #ffffff:

<div className={`bg-[${brewery.breweryType.colour}] absolute top-6 left-6 z-[1] w-fit rounded-3xl px-5 text-center text-sm leading-7 tracking-wide text-white uppercase`}>{brewery.breweryType.name}</div>

However, this caused the below error:

 ⨯ ./app/globals.css:2822:25
Parsing css source code failed
  2820 |   }
  2821 |   .bg-\[\$\{brewery\.breweryType\.colour\}\] {
> 2822 |     background-color: ${brewery.breweryType.colour};
       |                         ^
  2823 |   }
  2824 |   .bg-accent {
  2825 |     background-color: var(--color-accent);

Unexpected token CurlyBracketBlock at [project]/app/globals.css:2821:24

I removed the dynamic colour, but no matter what I do, I'm still getting the above error and can't work out how to remove it. My globals.css file in my project is only 361 lines long, so I can't find the offending file.

Please help, as my project is now stuck and I can't do anything.

Answer 1

I have the same problem and I think it's related to this.

https://github.com/vercel/next.js/issues/67513

Quick fix if you have a lot of variables: remove --turbo flag from next dev

The solution:

use styleobject instead of className when you have variable

<div style={{height: `${height}px`}} ...