Dynamic TailwindCSS custom styles not applied in Next.js components

Question

Description:

I'm building a Next.js app with TailwindCSS where I retrieve player data from Riot Games APIs. Using a player's "tier" data (e.g., 'EMERALD'), I aim to dynamically set a container's background color. However, certain dynamic Tailwind styles aren't being applied.

The data is retrieved like this

ladder rank:  [
  {
    leagueId: '<id>',
    queueType: 'RANKED_SOLO_5x5',
    tier: 'EMERALD',
    rank: 'IV',
    summonerId: '<summonerId>',
    summonerName: '<playerName>',
    leaguePoints: 0,
    wins: 65,
    losses: 61,
    veteran: false,
    inactive: false,
    freshBlood: true,
    hotStreak: false
  }
]

The frontend div container classname is like this

className={`w-48 h-64 border-4 ${data ? getRankStyles(data.tier) : ''} ...`}

The getRankStyles is a util function I created that looks like this

type Tier = 
  | 'IRON'
  | 'BRONZE'
  | 'SILVER'
  | 'GOLD'
  | 'PLATINUM'
  | 'EMERALD'
  | 'DIAMOND'
  | 'MASTER'
  | 'GRANDMASTER'
  | 'CHALLENGER';


export const getRankStyles = (rank: string) => {

    console.log("Ranked passed: ", rank)
    // switch (rank) {
    //     case 'IRON':
    return `border-${rank} bg-${rank} bg-opacity-25`;
    //     case 'BRONZE':
    //         return 'border-tier-bronze bg-tier-bronze bg-opacity-25';
    //     case 'SILVER':
    //         return 'border-tier-silver bg-tier-silver bg-opacity-25';
    //     case 'GOLD':
    //         return 'border-tier-gold bg-tier-gold bg-opacity-25';
    //     case 'PLATINUM':
    //         return 'border-tier-platinum bg-tier-platinum bg-opacity-25';
    //     case 'EMERALD':
    //         return 'border-tier-emerald bg-tier-emerald bg-opacity-25';
    //     case 'DIAMOND':
    //         return 'border-tier-diamond bg-tier-diamond bg-opacity-25';
    //     case 'MASTER':
    //         return 'border-tier-master bg-tier-master bg-opacity-25';
    //     case 'GRANDMASTER':
    //         return 'border-tier-grandmaster bg-tier-grandmaster bg-opacity-25';
    //     case 'CHALLENGER':
    //         return 'border-tier-challenger bg-tier-challenger bg-opacity-25';
    //     default:
    //         return 'border-gray-400 bg-gray-400';
    // }
}

I included the commented out code to show other ways I've tried to solve this issue.

Tailwind Configuration:

In tailwind.config.js, I've added custom colors under theme.extend.colors and other related properties. For example:

Issues Observed:

-Custom styles from tailwind.config.js don't seem to apply dynamically to the className according to the player's tier.
-Fixed styles work fine.

Steps Tried:

1. I've verified that there are no errors in the browser developer tools. The elements tab show the class being applied. But the Styles tab does not show the styles. There doesn't seem to be any overlapping styles either.
2. Checked postcss.config.js for correct plugins.
3. Played around with the content array in tailwind.config.js and tried disabling purging.
4. Ensured proper TailwindCSS integration with Next.js.

Any insights or suggestions would be appreciated.

This is my tailwind.config file

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: {
      colors: {
        'riot-dark': '#2D2D2D',
        riot: {
          primaryRed: '#d13639',
          secondaryRed: '#F12B15',
          black: '#000000',
          grayBlack: '#2D2D2D',
          white: '#FFFFFF'
        },
        lol: {
          primaryBlue: '#0bc6e3',
          lighterBlue: '#CDFAFA',
          darkerBlue: '#0A1428',
          functionalityGold: '#e0b667',
          lolbutton: '#0AC8B9',
          lolbuttonHover: '#0A323C',
          buttonText: '#0A323C',
          buttonTextHover: '#0AC8B9',
        },
        borderColor: {
          IRON: '#43464B',
          BRONZE: '#8B4513',
          SILVER: '#C0C0C0',
          GOLD: '#FFD700',
          PLATINUM: '#E5E4E2',
          EMERALD: '#50C878',
          DIAMOND: '#1E90FF',
          MASTER: '#9932CC',
          GRANDMASTER: '#4169E1',
          CHALLENGER: '#00008B', 
        },
        backgroundColor: {
          'riot-card': '#5B5A56',
          'riot-red': '#ff4248',
          'riot-gray1': '#A09B8C',
          'riot-gray1.5': '#5B5A56',
          'riot-gray2': '#3C3C41',
          'riot-gray3': '#1E2328',
          IRON: '#43464B',
          BRONZE: '#8B4513',
          SILVER: '#C0C0C0',
          GOLD: '#FFD700',
          PLATINUM: '#E5E4E2',
          EMERALD: '#50C878',
          DIAMOND: '#1E90FF',
          MASTER: '#9932CC',
          GRANDMASTER: '#4169E1',
          CHALLENGER: '#00008B',
        },
        backgroundImage: {
          'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
          'gradient-conic':
            'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      }
      },
    },
  },
  plugins: [],
}
export default config;

Answer 1

The 'borderColor' object is inside the 'colors'. Take it out maybe in the main 'extends' object and then try?