CODEWITHSUNDEEP
next.jsnextui
rocko rockd
rocko rockd

Reputation: 1

TailwindCSS is not getting applied in NextUI components in NextJS

I had this problem with NextUI : enter image description here

I cannot use NextUI components properly , tried changing my tailwind.config and reinstalling everything again.

NextUiProvider :

"use client";
import { NextUIProvider } from "@nextui-org/react";
import React from "react";

export default function NextUiProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  return <NextUIProvider>{children}</NextUIProvider>;
}

layout.tsx :

import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
import NextUiProvider from "./pages/nextuiprovider";
import Header from "../components/Header";

};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <NextUiProvider>
          <Header />
          {children}
        </NextUiProvider>
      </body>
    </html>
  );
}

tailwind.config.js :

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

/** @type {import('tailwindcss').Config} */
const config = {
  content: [
    // ...
    // make sure it's pointing to the ROOT node_module
    "./src/app/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}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()],
};

export default config;

Upvotes: 0

Views: 130

Answers (1)

Beast80K
Beast80K

Reputation: 1387

Problem :

NextUI components are not applying Tailwind CSS

Cause :

tailwind.config.js content key has wrong folder paths, there should be two ** stars [1] [2] [3].

Solution :

Replace content key in your tailwind.config.js [2]:

If you using src [4] folder then :

 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}",
  ],

If you are not using src folder then :

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}",
],

1st three lines are for Tailwind CSS config in NextJS. Last line ./node_modules/@nextui-org.... is for NextUI [3]. Order of content items doesn't matters.

Improvements :

Also the NextUiProvider you made is placed in pages directory, you may should move it to components folder as it is a component not a page.

Please Read :

Upvotes: 0

Related Questions