[BUG] - NEXTUI Does not work on Vercel Production Deployment in Nextjs14

[tavik000]

NextUI Version

2.4.6

Describe the bug

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)

this is localhost

and there is vercel production deployment

Your Example Website or App

https://react-key-blog-remake.vercel.app/en

Steps to Reproduce the Bug or Issue

click user button at top right corner, you will see the dropdown sign in button look not correct, click sign in button, you will see nothing popup

Expected behavior

sign in button look same with localhost sign in popup modal popup correctly like localhost

Screenshots or Videos

No response

Operating System Version

Window

Browser

Chrome

[linear[bot]]

ENG-1231 [BUG] - NEXTUI Does not work on Vercel Production Deployment in Nextjs14

[theonlyway]

It very much does work if you set it up correctly. Your site however, has none of the NextUI tailwind classes present in any of your CSS files so check your tailwind config when doing a production build

[tavik000]

I was followed the manual installation because my project exist before using NextUI.

this is my 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;

@theonlyway

[tavik000]

my folder structure

https://github.com/tavik000/ReactKeyBlogRemake

[tavik000]

I do have the env var

[tavik000]

after added correct env var, it fixed.

I refer this to solve https://github.com/nextui-org/nextui/issues/2599