CODEWITHSUNDEEP
next.jstailwind-cssnext.js13nextjs-imagenextui
Toko Game
Toko Game

Reputation: 53

NextUI Issues With CSS

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..

  1. 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="..">

enter image description here

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)

Upvotes: 0

Views: 11035

Answers (4)

Gus
Gus

Reputation: 7505

If you are working on a monorepo, for example with Turborepo, you'll notice that when running yarn add @next-ui/tabs, the dependency may not be installed in the app directory, but in the monorepo root directory:

node_modules
 @next-ui/** <== HERE
apps/
packages/

In this case, you can update your apps/project/tailwind.config.js file with:

module.exports = {
  content: [
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './ui/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    // Change './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
    // To:
    '../../node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
  ],

So that Tailwind reads from the correct dependency files.

Upvotes: 0

Sark Peha
Sark Peha

Reputation: 501

I had a similar issue where the styles for my NextUi component were not getting applied, all due to an annoying typo. I'm posting this here to hopefully save someone else:

tailwind.config.ts

Be sure that you have node_modules not node-modules ... smh.

"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"

Upvotes: 0

PacifismPostMortem
PacifismPostMortem

Reputation: 355

I had to set up the NextUiProvider according to the documentation.

in app/providers.tsx:

import {NextUIProvider} from '@nextui-org/react'
    
export function Providers({children}: { children: React.ReactNode }) {
  return (
    <NextUIProvider>
      {children}
    </NextUIProvider>
  )
}

in app/layout.tsx:

import {Providers} from "./providers";

export default function RootLayout({children}: { children: React.ReactNode }) {
  return (
    <html lang="en" className='dark'>
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}

Upvotes: 0

Beast80K
Beast80K

Reputation: 1377

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 :

If you still have any doubts, leave a comment

Upvotes: 6

Related Questions