Intento establecer el color dinámicamente según el contenido, por ejemplo, si el valor es android , el fondo debe ser verde y cuando es ios , debe ser azul. Quiero hacer esto con una función genérica para todo el proyecto Next.js (yo uso Tailwind CSS por el momento).
Esta es la función genérica para obtener el color específico según el contenido (en este caso, la etiqueta de una publicación).
export function getColor(tag) {
switch (tag) {
case "android":
case "androidx":
case "espresso":
case "retrofit":
return "bg-green-500"
case "ios":
case "facebook":
return "bg-blue-500"
case "angular":
case "java":
case "javascript":
case "javafx":
case "hms":
return "bg-red-500"
case "kotlin":
return "bg-purple-500"
case "firebase":
return "bg-yellow-500"
case "swift":
case "swiftui":
case "ubuntu":
return "bg-orange-500"
}
return "bg-gray-500"
}
Y esta es la forma en que configuro className .
<span
className={`text-white uppercase ${getColor(post.tags?.[0])} inline-flex items-center px-2 rounded text-sm font-semibold font-mono`}>
{post.tags?.[0]}
</span>
Aparentemente esto debería funcionar, pero no es así. Incluso a veces esto funciona y otras veces no. Anteriormente tenía esta función en cada archivo donde la necesito y funciona pero esa no es la idea. Quiero tener una función genérica (archivo separado) para todo el proyecto.
¿Cuál es la forma correcta de manejar esto? ¿Hay otra forma de actualizar el nombre de clase? ¿Cuál es el mejor enfoque para esto? Muchísimas gracias.
Encontré la solución gracias a @stickyuser, mi función genérica está en el archivo lib/util.js , y no está presente en tailwind.config.js . Agregué esta ruta a la configuración de viento de cola y esto funciona.
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./lib/**/*.{js,ts,jsx,tsx}",
],
...
Si funcionaba cuando la lógica estaba incluida en los archivos, pero no ahora, entonces parece que el archivo que contiene la lógica no está incluido en la configuración de content para su tailwind.config.js .
Intente actualizar la configuración de content para incluir el archivo lógico para que Tailwind sepa agregar esos nombres de clase (por ejemplo bg-green-500 , bg-blue-500 etc.) a su css de salida.
es más conveniente usar clsx para clases dinámicas, se verá como
className={clsx('some-class', areThereData && 'some-other-class', getColor(...))} .
Puede usar console.log o la declaración del depurador para depurar; probablemente cuando no funciona, no le pasas el valor correcto a la función