NextUI Components style won't apply while it actually does apply on some

I can't seem to find the solution to this problem, i'm using NextUI, i managed to make it work for some components as the navbar which normally means that i correctly installed nextui, i correctly configured tailwind, but the style won't apply on NextUI modals and inputs.

Here's my tailwind configuration :

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}", 
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@nextui-org/**/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Here's my component where i use the NextUI components that give me troubles :

import {
  Modal, 
  ModalContent, 
  ModalHeader, 
  ModalBody, 
  ModalFooter, 
  Button, 
  Input
} from "@nextui-org/react";
import { useState } from "react";

function LoginModal(props) {
  const [emailValue, setEmailValue] = useState('')
  const [passwordValue, setPasswordValue] = useState('')
  const [errorMessage, setErrorMessage] = useState([])

  return (
    <Modal 
      isDismissable={false} 
      isKeyboardDismissDisabled={true}  
      backdrop="opaque" 
      className={{
        backdrop: "bg-gradient-to-t from-zinc-900 to-zinc-900/10 backdrop-opacity-20"
      }}
      hideCloseButton={true}
      defaultOpen={true}
      >
      <ModalContent>
        {(onClose) => (
          <>
            {errorMessage && errorMessage.map(error => {
              return <h1 className=" text-red-800 font-sans">{error}</h1>
            })}
            <ModalHeader className="font-sans">Admin Connection</ModalHeader>
            <ModalBody>
              <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
                <Input 
                  type="email" 
                  label="Email" 
                  variant="flat"
                  onValueChange={setEmailValue}
                  value={emailValue}
                  isInvalid={errorMessage ? true : false}
                />
              </div>
              
              <Input 
                type="password" 
                label="Password"
                variant="underlined"
                onValueChange={setPasswordValue}
                value={passwordValue}
                />
            </ModalBody>
            <ModalFooter>
              <Button onPress={async () => {
                const response = await fetch('http://localhost:3000/users/adminLogin', {
                  method: 'POST',
                  headers: {
                    "Content-Type": "application/json",
                  },
                  body: JSON.stringify({
                    email: emailValue,
                    password: passwordValue
                  })
                })

                const data = await response.json();

                if (data.result) {
                  props.setIsAdmin(true);
                  onClose();
                } else if (data.result === false) {
                  const tmpArrayOfErrors = []
                  tmpArrayOfErrors.push(data.message)
                  setErrorMessage(tmpArrayOfErrors)
                } else if (!data.result) {
                  for (let i = 0; i < data.errors.length; i ++) {
                    const tmpArrayOfErrors = []
                    for (const index in data.errors) {
                      tmpArrayOfErrors.push(data.errors[index].msg)
                    }
                    setErrorMessage(tmpArrayOfErrors)
                  }
                }
              }}>
                Log in
              </Button>
            </ModalFooter>
          </>
        )}
        
      </ModalContent>

    </Modal>
  )
}

export default LoginModal

My global.css file :

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: "Romantic";
  src: url('../fonts/romantic-font-2-1715585786-0/ssromantic.otf');
}

body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  width: 100vw;
  height: 100vh;
  font-family: "Romantic";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  background-color: #E6E6FA;
}

* {
  box-sizing: border-box;
}

Any help would be greatly appreciated :)

Thanks !

Solution

Problem :

Can't apply custom styling to NextUI Modal and Input component

Cause :

You passed backdrop key to prop className, instead of classNames in Modal & also tailwind config is little improper.

Solution :

To customize NextUI components, you shall 1st refer to that component's props, look at classNames prop, and what keys can be passed to classNames are shown.

In your tailwind.config.js update plugins key (refer 1):

plugins: [nextui()]

Update Modal Props (refer 4 5 6):

<Modal 
    isDismissable={false} 
    isKeyboardDismissDisabled={true}  
    backdrop="opaque" 
    classNames={
        {
            backdrop: "bg-gradient-to-t from-zinc-900 to-zinc-900/10 backdrop-opacity-20"
        }
    }
    hideCloseButton={true}
    defaultOpen={true}
>

Similarly for <Input/> (refer 2 3) and you can see the keys are passed in classNames.

Regarding Font :

Suggestion for you to read this & implement if you wish to.

NextJS gives you a way to import local/custom fonts. Refer to links given below (refer 7 8).

Please Read :

Setup : https://nextui.org/docs/customization/theme#setup
Custom Styles (Input) : https://nextui.org/docs/components/input#custom-styles
Input Props : https://nextui.org/docs/components/input#input-props
Custom Styles (Modal): https://nextui.org/docs/components/modal#custom-styles
classNames (Modal Props) : https://nextui.org/docs/components/modal#modal-props
Custom Backdrop : https://nextui.org/docs/components/modal#custom-backdrop
Font Optimization : https://nextjs.org/docs/app/building-your-application/optimizing/fonts
Importing Custom/Local fonts : https://nextjs.org/docs/app/building-your-application/optimizing/fonts#local-fonts

If this answer was solved your problem then mark it as solution. If this answer was very helpful then you may upvote. If you have any doubts, then please leave a comment (I will update answer as necessary)