Integration Issue with NextUI Components in Next.js 14 Project

I'm currently working on a project using Next.js 14 and have incorporated NextUI for the UI components. However, I've encountered a problem where the components from NextUI are not functioning as expected.

To provide a clearer picture, I'm including two images: one from the NextUI documentation, which shows how the components should ideally look, and the other is a screenshot from my project, illustrating the issue I'm facing.

NextUI Documentation Screenshot:

My Project Screenshot:

Code Snippet:

Below is a snippet of my code where I'm using a NextUI button component:

import React from "react";
import {Button} from "@nextui-org/react";

export default function App() {
  return (
    <Button color="primary">
      Button
    </Button>
  );
}

Tailwind Configuration (tailwind.config.js):

I'm also using TailwindCSS in this project. Here's my Tailwind configuration:

    /** @type {import('tailwindcss').Config} */
    
    const { nextui } = require("@nextui-org/react");
    
    module.exports = {
      content: [
        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./components/**/*.{js,ts,jsx,tsx,mdx}",
        "./app/**/*.{js,ts,jsx,tsx,mdx}",
        "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
      ],
      important: true,
      theme: {
        extend: {
          fontFamily: {
            Peyda: ["Peyda"],
          },
          colors: {
            primary: "#ffffff",
            secondary: "#B8BBC0",
            dark: "#141E2E",
            red: "#E50045",
            green: "#70A75C;",
            blue: "#1171FF",
          },
          backgroundImage: {
            "body-bg": "url('/files/default/bg-pattern.png')",
            "price-box-bg": "url('/files/default/price_box_bg.png')",
            "wave-bg": "url('/files/default/wave.png')",
          },
        },
        backgroundColor: {
          white: "#ffffff",
          dark: "#141E2E",
          secondary: "#37404D",
          red: "#E50045",
          darkLight: "#1B273A",
          darkLighter: "#243042",
          green: "#70A75C;",
          blue: "#1171FF",
        },
      },
      plugins: [
        nextui({
          themes: {
            dark: {
              colors: {
                red: "#E50045",
                primary: {
                  DEFAULT: "#BEF264",
                  foreground: "#000000",
                },
                red: {
                  DEFAULT: "#e50045",
                  foreground: "#e50045",
                },
                focus: "#BEF264",
              },
            },
          },
        }),
      ],
      darkMode: "class",
    };

Provider in root:

"use client";

import { NextUIProvider } from "@nextui-org/react";
import { ThemeProvider as NextThemeProvider } from "next-themes";

export default function Providers({ children, session }) {
  return (
    <NextUIProvider>
      <NextThemeProvider attribute="class" defaultTheme="dark">
        {children}
      </NextThemeProvider>
    </NextUIProvider>
  );
}

This is my laout.js

import "@/app/globals.css";
import {
  Card,
  Avatar,
  Button,
} from "@/app/component/NextUiReactClientComponents";
import { apibaseUrl } from "@/apiConfig";
import HomeIcon from "public/icons/home.svg";
import LogOutIcon from "public/icons/logout.svg";
import Logo from "public/files/default/logo.png";
import SideNavPage from "./SideNavPage";
import Image from "next/image";
import Link from "next/link";
import Providers from "@/app/provider";
import { signOut, auth } from "@/auth";

export default async function AccountLayout({ children }) {
  //
  const photoUrl = `${apibaseUrl}/files/default/user-avatar.png`;
  return (
    <html lang="en" dir="rtl">
      <body className="bg-white dark:bg-dark text-dark dark:text-white">
        <Providers>
          <div className="mask">
            <div className="container mx-auto py-10">
              <div className="grid sm:grid-cols-1 lg:grid-cols-12 gap-4">
                <div className="col-span-3">
                  <SideNavPage>{children}</SideNavPage>
                </div>
                <div className="col-span-9">
                  <Card className="p-5 rounded-lg bg-darkLight text-white">
                    {children}
                  </Card>
                </div>
              </div>
            </div>
          </div>
        </Providers>
      </body>
    </html>
  );
}

folder structure:

app/(account)/account/profile

Seeking Assistance: I am looking for guidance on how to resolve this discrepancy between the NextUI documentation and the actual rendering in my project. Any insights or suggestions on what might be causing this issue and how to fix it would be greatly appreciated.

Solution

I identified the issue: it stemmed from the tailwind.config.js file, where conflicting settings in two themes were causing problems. To resolve this, I revised the tailwind.config.js file as follows:

/** @type {import('tailwindcss').Config} */

const { nextui } = require("@nextui-org/react");

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  important: true,
  theme: {
    extend: {
      fontFamily: {
        Peyda: ["Peyda"],
      },
      backgroundImage: {
        "body-bg": "url('/files/default/bg-pattern.png')",
        "price-box-bg": "url('/files/default/price_box_bg.png')",
        "wave-bg": "url('/files/default/wave.png')",
      },
    },
  },

  plugins: [
    nextui({
      themes: {
        light: {
          layout: {},
          colors: {
            primary: "#ffffff",
            secondary: "#B8BBC0",
            dark: "#141E2E",
            red: "#E50045",
            green: "#70A75C;",
            blue: "#1171FF",
          },
          backgroundColor: {
            white: "#ffffff",
            dark: "#141E2E",
            secondary: "#37404D",
            red: "#E50045",
            darkLight: "#1B273A",
            darkLighter: "#243042",
            green: "#70A75C;",
            blue: "#1171FF",
          },
        },
        dark: {
          layout: {},
          colors: {
            primary: "#ffffff",
            secondary: "#B8BBC0",
            dark: "#141E2E",
            red: "#E50045",
            green: "#70A75C;",
            blue: "#1171FF",
          },
          backgroundColor: {
            white: "#ffffff",
            dark: "#141E2E",
            secondary: "#37404D",
            red: "#E50045",
            darkLight: "#1B273A",
            darkLighter: "#243042",
            green: "#70A75C;",
            blue: "#1171FF",
          },
        },
      },
    }),
  ],
  plugins: [nextui()],
  darkMode: "class",
};