Tailwind colors dont work with Astro.props?

[tender iris]

I have a component that receives a tailwind color but when I try setting a tag's class to bg-${color} the color wont appear! The values are correct, checked in devtools and in console. But the color doesn't work...

[tender iris]

I tried putting the class in a div but it still wont work...

[unique smelt]

You cant create tailwind classes using template literals, see the section labeled ‘Dynamic class names’ https://tailwindcss.com/docs/content-configuration

[tender iris]

I see

so instead of text-${color} id use color = "text-" + color and ${color}?

[unique smelt]

No you cant create tailwind classes dynamically

The full class name has to be in the file as an unbroken string for it to be picked up

[tender iris]

then what do I do? cause I want the colors on hover to flip? (as in bg becomes text color and vice versa)

[unique smelt]

You can do something like: js const classes = { red: "bg-red-500", blue: "bg-blue-500", ... } Then use the classes like classes[color]

[tender iris]

I see, thanks!

[tender iris]

sorry for the ping but I wrote this

const classMap = {
    "bg": {
        "highlight": "bg-highlight",
        "highlight_dark": "bg-highlight_dark"
    },
    "text": {
        "highlight": "text-highlight",
        "highlight_dark": "text-highlight_dark"
    }
}

but now I get this error

Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ highlight: string; highlight_dark: string; }

(im using ${classMap["text"][color]})

[unique smelt]

It all good, I think what is happening is you need to use classMap.text[color] and make sure the the color variable is typed as a string in your component

[tender iris]

make sure the the color variable is typed as a string in your component
Wdym?

you mean like how I use it like this?

Because the normal color works but not the hover for some reason

[unique smelt]

Since color is a prop is should be typed like this ```ts
export interface Props {
color?: string;
bgColor?: string;
...
}

const { color, ... } = Astro.props as Props

Then you should not get the any error anymore because typescript knows its a string

[tender iris]

now I get this error :I

[unique smelt]

You have to set a default value on your prop like ```js
const {
color="red"
} = Astro.props as Props

[tender iris]

aw what

o

as props

still

hm

[unique smelt]

Can you post the full component's code? ill paste it in my editor and see

[tender iris]

---
const { href = "#", content = "button", color = "highlight", bgColor = "highlight_dark"} = Astro.props as Props

export interface Props {
    href?: string
    content?: string;
    color?: string;
    bgColor?: string;
}

const classMap = {
    "text": {
        "highlight": "text-highlight",
        "highlight_dark": "text-highlight_dark"
    },
    "bg": {
        "highlight": "bg-highlight",
        "highlight_dark": "bg-highlight_dark"
    }
}
--- 
<a
            href={href}
            class={`transition-all p-2.5 rounded-3xl shadow-md

                    ${classMap.text[color]} ${classMap.bg[bgColor]} 
                    hover:${classMap.text[bgColor]} hover:${classMap.bg[color]}
                    
                    hover:-translate-y-0.5 active:rounded-xl`}>
            {content}
</a>

I decided to also include everything else and add defaults cause why not seems useful

[unique smelt]

Looks like the problem was that classMap was not typed so I typed it, also I fixed your hovers because the classes were still being created dynamicall, and switch from string template to class:list for class logic ```jsx

export interface Props {
href?: string
content?: string;
color?: string;
bgColor?: string;
}

const {
href = "#",
content = "button",
color = "highlight",
bgColor = "highlight_dark"
} = Astro.props as Props

const classMap: {
[key: string]: {
[key: string]: [string, string];
}
} = {
text: {
highlight: ["text-highlight", "hover:text-highlight"],
highlight_dark: ["text-highlight_dark", "hover:text-highlight_dark"]
},
bg: {
highlight: ["bg-highlight", "hover:bg-highlight"],
highlight_dark: ["bg-highlight_dark", "hover:bg-highlight_dark"]
}
}

<a
href={href}
class:list={[
"transition-all p-2.5 rounded-3xl shadow-md",
classMap.text[color][0],
classMap.bg[bgColor][0],
classMap.text[bgColor][1],
classMap.bg[color][1],
"hover:-translate-y-0.5 active:rounded-xl"

]}

{content}

</a>