NextUI Issues With CSS

Question

I just started installing NextUI on my existing project which uses styled components to style all of the components. After installing NextUI following the guide, I was able to display Tabs and Table. I encountered a few css issues:

1. The color primary is not reflected on the tabs's color, it still shows Blue where as i had configured some green color.

<Tabs
            aria-label="Menu"
            size="lg"
            color="primary"
            selectedKey={selectedTab}
            onSelectionChange={setSelectedTab}
          >
            <Tab key="orders" title="Recent Orders">

my tailwind.config.js:

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@nextui-org/theme/dist/components/(tabs|table).js",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [
    nextui({
      themes: {
        light: {
          colors: {
            background: "#FFFFFF", // or DEFAULT
            foreground: "#11181C", // or 50 to 900 DEFAULT
            primary: {
              //... 50 to 900
              foreground: "#FFFFFF",
              DEFAULT: "#05CE78", // Some green color, definitely not blue
            },
          },
        },
      },
    }),
  ],
};

Strangely, i was able to change foreground color to any color i specify but NOT the DEFAULT color. Changing DEFAULT color had no effect, it continues to display Blue color Tabs..

2. User component avatarProps somehow is having 0 opacity without me changing anything: I can see the image properly once i remove the opacity from <img class="..">

I have absolutely no clue who added the class value for tailwindcss.

Please help.. I was simply hardcoding things straight from code example. What am i missing here?

I tried reinstalling tailwind, doing all the steps in tailwind guide, i only use simple elements, i also tried Button, same thing, primary color that I specified did not show up (only Blue primary is shown)

Answer 1

Problem :

NextUI Issues With CSS

Possible Cause :

Improper Tailwind Config

Solution :

Update content key in your tailwind.config.js to:

content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"

 
    // Or if using `src` directory:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],

Please Read :

• Configuring Tailwind in NextJS : https://nextjs.org/docs/app/building-your-application/styling/tailwind-css
• NextUI Tailwind CSS Setup : https://nextui.org/docs/frameworks/nextjs#tailwind-css-setup
• Tailwind CSS Configuration with Next.js : https://tailwindcss.com/docs/guides/nextjs

If you still have any doubts, leave a comment