linear[bot]
commented
3 months ago Closed daniel-aziz closed 3 months ago
linear[bot]
commented
3 months ago 
soyricardodev
commented
3 months ago did u updated your tailwindcss config? Tailwindcss setup Provider setup
if u can provide a repo to see the problem i can help u
daniel-aziz
commented
3 months ago did u updated your tailwindcss config? Tailwindcss setup Provider setup
if u can provide a repo to see the problem i can help u
Unfortrunnaly i cannot provide a repo, as it is private.
Provider setup at layout.tsx
"use client";
import "~/styles/globals.css";
import { NextUIProvider } from "@nextui-org/react";
import Layout from "src/app/_components/Layout";
import React from "react";
import TrpcProvider from "~/app/_trpc/TrpcProvider";
import { ClerkProvider } from "@clerk/nextjs";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<head>
<title>Portal</title>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon-16x16.png"
/>
</head>
<body>
<ClerkProvider>
<TrpcProvider>
<NextUIProvider>
<Layout>{children}</Layout>
</NextUIProvider>
</TrpcProvider>
</ClerkProvider>
</body>
</html>
);
}
Tailwind config
import { type Config } from "tailwindcss";
import { nextui } from "@nextui-org/react";
import { Colors, GradientColors } from "./src/styles/colors";
import { BorderRadius, BoxShadow } from "./src/styles/layout";
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./src/**/*.{js,ts,jsx,tsx,mdx}",
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
colors: {
...Colors,
},
backgroundImage: {
...GradientColors,
},
boxShadow: {
...BoxShadow,
},
borderRadius: {
...BorderRadius,
},
fontSize: {
"2xs": ["0.73rem", "1.05rem"], // 11px
xs: ["0.86rem", "1.25rem"], // 13px
sm: ["0.93rem", "1.34rem"], // 14px
base: ["1rem", "1.44rem"], // 15px
"2xl": ["1.60rem", "2.30rem"], // 24px
"3xl": ["2.26rem", "3.26rem"], // 34px
"4xl": ["2.66rem", "3.84rem"], // 40px
},
},
darkMode: "class",
plugins: [
nextui({
themes: {
light: {
colors: {
primary: {
DEFAULT: Colors.lavender[700],
},
},
},
},
}),
],
} satisfies Config;My app folder is located under agency folder, this is the structure.
Root -> portals -> agency -> src -> app -> layout.tsxall package.json, tailwind.config.ts node_modules are located under agency folder
ericljiang
commented
3 months ago In your Tailwind config, change this line
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"to this
"./node_modules/@nextui-org/react/node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"I'm interested to hear from the NextUI team if the installation instructions are incorrect or if we have set up something incorrectly and the original configuration is supposed to work.
wingkwong
commented
3 months ago @daniel-aziz the steps look correct. please share a minimal reproducible example for us to investigate
@ericljiang "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}" is correct. if you are using pnpm, you need to add public-hoist-pattern[]=*@nextui-org/* to .npmrc.
daniel-aziz
commented
3 months ago @wingkwong @ericljiang You can close this. i'm adding my solution for anyone wondering.
I have created the app with pnpm create t3-app@latest and changed the file structure as listed under.
my node_modules path was probably incorrect.
i changed from this
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",to this
"../../node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",this is my file structure
Root
├── node_modules
├── portals
│ ├── agency
│ │ ├── src
│ │ │ ├── app
│ │ │ │ ├── layout.tsx
│ │ ├── tailwind.config.ts
NextUI Version
2.3.6
Describe the bug
I have a Next.js 14 application using app router. i have tried to integrate manully Next UI, followed the docs and set up using Global Installation. I have installed version
2.3.6but i have no styling in the UI componentsI'm importing component as the following
im also tried importing from
@nextui-org/inputbut same resultsafter digging around, and trying to set up or fork other projects, i installed manually, the following dependencies
I got styling at last.
i did tried to update those dpendincies to the last version to
but i get no styling, so i reverted back
my current dependencies
tell where have i gone worng in the installation process. my set up was
NextUiProvider.npmrcYour Example Website or App
No response
Steps to Reproduce the Bug or Issue
Expected behavior
should be styling
Screenshots or Videos
No response
Operating System Version
MacOS 14.4.1
Browser
Chrome