Entonces, estoy pasando accesorios a mi componente JSX, y luego configuro esos accesorios en un degradado de negro a ese accesorio. Pero cada vez que intento esto, el degradado termina pasando de negro a solo un fondo transparente.
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¿Qué tengo que hacer?
Tailwind analiza estáticamente sus archivos. No puede interpolar cadenas. Entonces, cada vez que pasas una clase, tienes el pase completo. 'to-red-500' en lugar de `to-${'red-500'}`
Los siguientes cambios deberían hacer que funcione (probablemente debería actualizar el nombre de la propiedad de color para decir 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