Color not rendering from props

Question

So, I'm passing in props to my JSX component, and then setting that props into a gradient from black to that prop. But whenever I try this, the gradient ends up going from black to just a transparent background.

import React from 'react'

import Color from './color'

const App = () => {
    return (
        <div className="h-screen w-screen">
            <Color color="red-400" />
        </div>
    )
}

export default App

import React from 'react'

const color = props => {


    return (
        <div className="h-screen w-screen">
            <div className={`h-full w-full absolute bg-gradient-to-r from-cyan-500 to-${props.color}`}>
                {props.text}
            </div>
        </div>
    )
}

export default color

What should I do?

Answer 1

Tailwind statically scans your files. It cannot interpolate strings. So whenever you pass a class, you have the pass the whole thing. 'to-red-500' instead of `to-${'red-500'}`

Following changes should make it work(should probably update the prop name from color to say tocolor):

import React from 'react'

import Color from './color'

const App = () => {
    return (
        <div className="h-screen w-screen">
            <Color color="to-red-400" />
        </div>
    )
}

export default App

import React from 'react'

const color = props => {


    return (
        <div className="h-screen w-screen">
            <div className={`h-full w-full absolute bg-gradient-to-r from-cyan-500 ${props.color}`}>
                {props.text}
            </div>
        </div>
    )
}

export default color