Search code examples
typescriptnext.jstailwind-css

tailwind class is getting added but style is not applied in nextjs

I am tryig to create a board game which includes keeping track of players that who is on which square. So if player is currently on currently rendering block I want to show a small dot of a perticular color.

Here is my template code

<div className="board">
  {board.map((val, idx) => {
    return (
      <div className="row" key={idx}>
        {val.map((block) => {
          return (
            <div className="block" key={block!.index}>
              {block!.index}
              <div className="player-dots">
                {players.map((player: PlayerType) => {
                  if (player.currentSquare === block!.index) {
                    let colorClass: string = `bg-player${player.id}color`;
                    return (
                      <div
                        className={`h-3 w-3 rounded-full ${colorClass}`}
                        key={player.id}
                      ></div>
                    );
                  }
                })}
              </div>
            </div>
          );
        })}
      </div>
    );
  })}
</div>;

And the tailwind config is

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/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: {
      midnight: "#121063",
      primary: "#3A0CA3",
      secondary: "#4361EE",
      tertiary: "#4CC9F0",
      rose: "#F72585",
      grape: "#7209B7",
      white: "#ffffff",
      player1color: "#FF0000",
      player2color: "#0FA3B1",
      player3color: "#E072A4",
      player4color: "#3D3B8E",
    },
  },
  plugins: [require("@tailwindcss/forms")],
};
export default config;

In the DOM we can see that the class is getting added but style is not applied

enter image description here

I tried generating class name dynamically within className but that also did not work.

Solution

  • You cannot construct dynamic classnames with Tailwind, see https://tailwindcss.com/docs/content-configuration#dynamic-class-names.

    Either include all variants in full without a string template or include the classes that are not generated in your tailwind config safeList:

    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  safelist: [
    'bg-player1color',
    'bg-player2color',
  ]
  // ...
}