Not applying Tailwind style when conditionally get information from server.

[luksrocha]

Not applying Tailwind style when conditionally get information from server.

[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]

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.