spark condor
NextUI Version
2.4.6
I am using Dropdown and Modal in my blog project and I am using Next 14.2.5 with NextUI 2.4.6
it work fine in localhost, but does not work in vercel production deployment (DropdownItem size weird, and the modal popup does not show)
first 2 image are from localhost which is correct one, the later 2 image from vercel deplooyment, which is not correct.
dusky spruce
Share your tailwind config
spark condor
tailwind.config.ts
import type { Config } from 'tailwindcss';
const {nextui} = require("@nextui-org/react");
const config: Config = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
fontSize: {
'13px': '13px',
'14px': '14px',
'28px': '28px',
},
gridTemplateColumns: {
'13': 'repeat(13, minmax(0, 1fr))',
},
colors: {
blue: {
400: '#2589FE',
500: '#0070F3',
600: '#2F6FEB',
},
},
height: {
'400px': '400px',
},
width: {
'1200px': '1200px',
},
minWidth: {
'32px': '32px',
'40px': '40px',
'54px': '54px',
},
minHeight: {
'32px': '32px',
'40px': '40px',
},
boxShadow: {
'0550': '0 5px 5px 0 rgba(0, 0, 0, 0.3)',
'02': '0 2px rgba(0, 0, 0, 0.2)',
},
maxWidth: {
'400px': '25rem',
'1140px': '1140px',
},
padding: {
'3px': '3px',
'5px': '5px',
'11px': '11px',
'1em': '1em',
},
margin: {
'5px': '5px',
},
},
keyframes: {
shimmer: {
'100%': {
transform: 'translateX(100%)',
},
},
},
},
darkMode: "class",
plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography'), [nextui()]],
};
export default config;
package.json
{
"private": true,
"scripts": {
"build": "next build",
"dev": "next dev",
"lint": "next lint",
"prettier": "prettier --write --ignore-unknown .",
"prettier:check": "prettier --check --ignore-unknown .",
"seed": "node -r dotenv/config ./scripts/seed.js",
"start": "next start"
},
"dependencies": {
"@formatjs/intl-localematcher": "^0.5.4",
"@heroicons/react": "^2.0.18",
"@mdx-js/loader": "^3.0.1",
"@mdx-js/react": "^3.0.1",
"@next/mdx": "^14.2.5",
"@nextui-org/dropdown": "^2.1.29",
"@nextui-org/react": "^2.4.6",
"@tailwindcss/forms": "^0.5.7",
"@types/mdx": "^2.0.13",
"@types/negotiator": "^0.6.3",
"@types/node": "20.5.7",
"@types/pg-format": "^1.0.5",
"@uiw/react-markdown-preview": "^5.1.2",
"@uiw/react-md-editor": "^4.0.4",
"@vercel/postgres": "^0.9.0",
"autoprefixer": "10.4.15",
"bcrypt": "^5.1.1",
"clsx": "^2.0.0",
"framer-motion": "^11.3.17",
"install": "^0.13.0",
"negotiator": "^0.6.3",
"next": "14.2.5",
"next-auth": "5.0.0-beta.20",
"next-cloudinary": "^6.6.2",
"next-mdx-remote": "^5.0.0",
"next-remove-imports": "^1.0.12",
"parse-numeric-range": "^1.3.0",
"pg-format": "^1.0.4",
"postcss": "8.4.31",
"prismjs": "^1.29.0",
"react": "18.2.0",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "18.2.0",
"react-markdown": "^9.0.1",
"react-syntax-highlighter": "^15.5.0",
"rehype-raw": "^7.0.0",
"remark-gfm": "^4.0.0",
"tailwindcss": "3.4.0",
"typescript": "5.2.2",
"use-debounce": "^9.0.4",
"vercel": "^32.3.0",
"zod": "^3.22.2",
"zustand": "^4.5.4"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.13",
"@types/bcrypt": "^5.0.1",
"@types/react": "18.2.21",
"@types/react-dom": "18.2.14",
"@types/react-syntax-highlighter": "^15.5.13",
"@vercel/style-guide": "^5.0.1",
"dotenv": "^16.3.1",
"eslint": "^8.52.0",
"eslint-config-next": "15.0.0-rc.0",
"eslint-config-prettier": "9.0.0",
"prettier": "^3.0.3",
"prettier-plugin-tailwindcss": "0.5.4"
},
"engines": {
"node": ">=18.17.0"
}
}
Share your folder structure, it probably is not the same as local and thus this is the issue.
I had a similar issue where I had misconfigured contents.
const config: Config = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
],
spark condor
@dusky spruce my folder structure https://github.com/tavik000/ReactKeyBlogRemake
my env var
