Classname not working with {`…${…}…`} or not showing any style in page

I am trying the typical pokedex with the pokeapi and i’m styling it with and for eacht type i wanted to change some styles, mainly colors like background. I created a typesStyles object that has an attribute for each type, and each attribute is an object with properties like:

const typesStyles = {
    bug: {
        color: 'lime-800'
    },
// rest of types
}

I imported it as typesStyles and wanted to use it in my className’s so I did:

<div className={`bg-gradient-to-b from-${mainStyles.color} from-50% to-${secondaryStyles.color} to-50% mx-auto flex flex-col p-4 my-4 w-1/2`}>
// ...
</div>

Now my problem is that i’m getting no color at all in my localhost for some reason, i put some onClick={() => console.log(mainStyles.color)} I get said ‘lime-800’ in the console. But the weirdest or more frustrating part to me is that when I open the devtools in any browser I do get:

<div class="bg-gradient-to-b from-lime-800 from-50% to-lime-800 to-50% mx-auto flex flex-col p-4 my-4 w-1/2">
// ...
</div>

And no color at all.

And if I change my code so that it literally says '...lime-800...' it works (I don’t want that, i want to make it change por each Poke) but when I tried ...${'lime-800'}..., nothing again. Is it something with react? With tailwind maybe? although I doubt it. I know that typeStyles[bug] returns ‘lime-800’ via console.log’s
Thanks in advance.