In NextJS I'm trying to apply both a static CSS-class and a conditional class to an element. Separated from each other I can make both work, but when bining them it will result in an unexpected error.

# This will work
<span className="font-medium">{message}</span>

# This will work too
<span className={status ? "bg-green-600":"bg-orange-600"}>{message}</span>

In Visual Studio the following snippet will give an error ',' expected.ts(1005)

# This (where I'm trying to apply *both* classes to the same element) won't work
<span className={"font-medium" + {status ? "bg-green-600":"bg-orange-600"}}>{message}</span>

Ignoring that will give following error:

Error: 
  x An object member cannot be declared optional

In NextJS I'm trying to apply both a static CSS-class and a conditional class to an element. Separated from each other I can make both work, but when bining them it will result in an unexpected error.

# This will work
<span className="font-medium">{message}</span>

# This will work too
<span className={status ? "bg-green-600":"bg-orange-600"}>{message}</span>

In Visual Studio the following snippet will give an error ',' expected.ts(1005)

# This (where I'm trying to apply *both* classes to the same element) won't work
<span className={"font-medium" + {status ? "bg-green-600":"bg-orange-600"}}>{message}</span>

Ignoring that will give following error:

Error: 
  x An object member cannot be declared optional

• javascript
• html
• next.js
• jsx
• tailwind-css

2 Answers 2

You need a space after font-medium, because it will be interpreted as a single class otherwise

<span className={"font-medium " + status ? "bg-green-600":"bg-orange-600"}>{message}</span>

And with template literals :

<span className={'font-medium ${status ? "bg-green-600" : "bg-orange-600" }'}>{message}</span>

(Please note it's `and not ' here)

In this type of cases, dont forget to debug by inspecting the element and checking the classes

You can also use backtick (`) as an alternative like this

<span className=`font-medium ${status ? 'bg-green-600' : 'bg-orange-600' `}>{message}</span>