Tailwind twin.macro can't resolve dynamic css value with Only plain strings can be used with "tw" error

I am using TailwindCSS with twin.macro. (nextjs, react)

Currently mapping some list of values and use one of those string as text color like this

twtext-[${content.data.color}]

here is my snippet of code that returns "plain strings" error

            return (
                    <div>
                        {content.data.number != 0 ? (
                            <div
                                css={[
                                    tw`rounded-sm mt-4 bg-gray-200 w-11 text-center text-sm mx-4`,
                                    tw`text-[${content.data.color}]` <- returns error
                                ]}
                            >
                                {content.data.text}
                            </div>

I checked this workarounds but not sure how exactly solve this problem since I need to stay inline style since the value I will use is dynamic. Any idea to workaround this issue without causing Only plain strings can be used with "tw" error message?