Not applying Tailwind style when conditionally get information from server.

[luksrocha]

Link to the code that reproduces this issue

https://github.com/luksrocha/pokeapi-next14

To Reproduce

Just run the application, if you check the browser devtools you can see that background color is applied, but there is no results on the screen.

Basically the background color is get from the server and based on that information it renders some differents colors.

Current vs. Expected behavior

The BG is white and it needs to be differents for each card.

Provide environment information

Node Version: 20.0.0
Next Version: 14.2.2

Which area(s) are affected? (Select all that apply)

App Router

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

[nellysbr]

It's not a Nextjs bug.

When you're working with dynamic classes using tailwind (based on a condition), you need to use a different approach. Fortunately, for your case, you can add the classes you'll use dynamically to your safelist in your tailwind.config.ts file and it will look like this:

const { nextui } = require("@nextui-org/react");
import type { Config } from "tailwindcss";

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}",
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  safelist: [
    "bg-gray-400",
    "bg-red-500",
    "bg-blue-400",
    "bg-purple-600",
    "bg-yellow-700",
    "bg-yellow-600",
    "bg-green-500",
    "bg-indigo-600",
    "bg-gray-300",
    "bg-red-600",
    "bg-blue-500",
    "bg-green-400",
    "bg-yellow-400",
    "bg-pink-500",
    "bg-blue-200",
    "bg-indigo-800",
    "bg-gray-800",
    "bg-pink-300",
    "bg-teal-500",
    "bg-gray-80",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  darkMode: "class",
  plugins: [nextui()],
};
export default config;

If you want a more detailed explanation, you can watch the following video: https://www.youtube.com/watch?v=guh9qzxkb1o

Cheers :)

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.