I’m trying to import a a navbar from NextUI and it has just been a nightmare. I tried following Youtube vids and the docs and still something seems to be missing. this is what the navbar is supposed to look like.here is what it looks like now without the styles being implemented. I’m assume it’s because of something wrote i did with tailwind.
`/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
plugins: [],
}`
^^Here is my tailwind.config.js file^^
I’ve also tried it way too for the tailwins.config.js file
`// 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
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
],
theme: {
extend: {},
},
darkMode: "class",
plugins: [nextui()]
}
export default config;`
Here is an img of my folders
and here is my package.json file
{ "name": "fantasy-football", "version": "0.1.0", "private": true, "dependencies": { "@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0", "@mui/icons-material": "^5.16.7", "@mui/material": "^5.16.7", "@mui/styled-engine-sc": "^6.0.0-alpha.18", "@nextui-org/button": "^2.0.37", "@nextui-org/react": "^2.4.6", "@nextui-org/shared-icons": "^2.0.9", "@nextui-org/system": "^2.2.5", "@nextui-org/theme": "^2.2.9", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "framer-motion": "^11.3.28", "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.26.1", "react-scripts": "5.0.1", "rollup-plugin-ts": "^3.4.5", "styled-components": "^6.1.12", "ts-plugin": "^0.1.5", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "autoprefixer": "^10.4.20", "postcss": "^8.4.41", "tailwindcss": "^3.4.10" } }
please and thank you!
i tried redoing the installation like 10 times, watching youtube vids. not sure what’s happening. lmk if you need more files. thanks!!!