Next.js Discord

Discord Forum

cannot put an value from a variable inside an className

Answered
shadow posted this in #help-forum
Open in Discord
shadowOP
Hey devs, i have a function that checks the tier and returns the color of that tier to be used as an className

checkRarity function:
export function checkRarity(tier: string) {

  const rarityLookup = new Map([
    ["COMMON", "text-rarity-common"],
    ["UNCOMMON", "text-rarity-uncommon"],
    ["RARE", "text-rarity-rare"],
    ["EPIC", "text-rarity-epic"],
    ["LEGENDARY", "text-rarity-legendary"],
    ["MYTHIC", "text-rarity-mythic"],
    ["DIVINE", "text-rarity-divine"],
    ["SPECIAL", "text-rarity-special"],
    ["VERY_SPECIAL", "text-rarity-very-special"],
  ]);

  return rarityLookup.get(tier) || "bg-gray-400";
}


and inside an component im getting the output:
const textColor = await checkRarity(auction.tier);

(i know the value is being returned successfully because i used an console log(textColor) after the function and the correct value is being returned)


and then using the value inside an header:

<h2 className={`text-2xl ${textColor}`}>{auction.itemName}</h2>


but for some reason the header dont change the color.

if i put those value for ex: text-rarity-divine the color gets applied but when the script tries to add the color, it cant.
can someone help me here?
Answered by joulev
The file with the “checkRarity” function must be covered by the content array
View full answer

23 Replies

Golden-winged Warbler
I think you need something like: https://github.com/JedWatson/classnames
Saluki
Hey,
Why are you using await? checkRarity is not an async function.
@Saluki Hey, Why are you using await? checkRarity is not an async function.
shadowOP
removed await and still does not work
Saluki
I see, other than that i can only suggest ensuring that the css classes are properly defined.
@Saluki I see, other than that i can only suggest ensuring that the css classes are properly defined.
shadowOP
i have entered the class manually, and the class is being applied
<h2 className="text-2xl text-rarity-special">{auction.itemName}</h2>
@Golden-winged Warbler I think you need something like: https://github.com/JedWatson/classnames
shadowOP
import classNames from 'classnames';
import { checkRarity } from "@/utils/Misc";

const textColor = classNames("text-2xl", checkRarity(auction.tier));

return (
    <div className="bg-slate-500 p-4">
      <h2 className={textColor}>
        {textNoStars} <span className="text-rarity-legendary">{stars}</span>
      </h2>
    </div>
  );

(i think im using the library corretly)
Golden-winged Warbler
does it look like it has the right classes applied when you inspect in the browser?
shadowOP
yes
its funny because when i change to different rarities in inspector, the legendary is only one that actually change the color, the others, dont change the color
Golden-winged Warbler
[side comment, you need an "omega" rarity with "iskallium" color :]
are you using Tailwind or something else?
shadowOP
using tailwind
Golden-winged Warbler
iirc, Tailwind doesn't like dynamic class names, or generally, maybe a CSS fragment is missing for the other classnames that aren't rendering?
shadowOP
tailwind.config.ts
import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
      colors: {
        bin: "#00BC8C",
        auction: "#6495ED",
      },
      textColor: {
        "rarity-common": "#FFFFFF",
        "rarity-uncommon": "#55FF55",
        "rarity-rare": "#5555FF",
        "rarity-epic": "#AA00AA",
        "rarity-legendary": "#FFAA00",
        "rarity-mythic": "#FF55FF",
        "rarity-divine": "#55FFFF",
        "rarity-special": "#FF5555",
        "rarity-very-special": "#FF5555",
      },
    },
  },
  plugins: [],
};
export default config
i have the rarities declared
shadowOP
the thing is, the right class is being applied but why the browser doesnt apply the color
Golden-winged Warbler
I think Tailwind cannot infer all of the possible classes, so while the class value is updated, there is no CSS to go with it
You probably want one of these two options:
- https://stackoverflow.com/a/74957762
- https://stackoverflow.com/a/76660733

I'm going to be trying them both when I get back around to doing some styling and layout work
Answer
joulev
Else the class isn’t found in your code and won’t be included in the final bundle
Tailwind doesn’t include all classes, it only includes the classes it can find in the files you defined in the content array
@joulev Tailwind doesn’t include all classes, it only includes the classes it can find in the files you defined in the content array
shadowOP
i used the safelist feature from tailwind and i managed to solve the problem