I’m trying to create a Next.js project using Turborepo. I want to apply NextUI, and it seems like the styles are being loaded because the button has many classes, but the styles are not being applied.
"@nextui-org/react": "^2.4.6",
Button displayed in Developer Tools
<button class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent data-[pressed=true]:scale-[0.97] outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-4 min-w-20 h-10 text-small gap-2 rounded-medium [&>svg]:max-w-[theme(spacing.8)] transition-transform-colors-opacity motion-reduce:transition-none bg-default text-default-foreground data-[hover=true]:opacity-hover" type="button">Button</button>
// tailwind.config.ts
const { nextui } = require("@nextui-org/react");
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
// make sure it's pointing to the ROOT node_module
"./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}",
],
theme: {
extend: {},
},
darkMode: "class",
plugins: [nextui()],
};
// _app.tsx
import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { Providers } from "@repo/ui/uiProvider";
export default function App({ Component, pageProps }: AppProps) {
return (
<Providers>
<Component {...pageProps} />
</Providers>
);
}
// packages/ui/src/index.tsx
import { NextUIProvider } from "@nextui-org/react";
export function Providers({ children }: { children: React.ReactNode }) {
return <NextUIProvider>{children}</NextUIProvider>;
}
// packages/ui/src/button.tsx
export const Button = () => {
return <NextUIButton>Button</NextUIButton>;
};
I’ve been trying for three days to resolve this issue, but I still can’t find a solution. I’ve reviewed the official documentation and reconfigured everything, but the styles still aren’t being applied. Could you please help me?
user26755203 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.