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.