I've hit a roadblock trying to solve this issue. While using NextUI, I've managed to successfully apply styles to some components like the navbar, indicating that I have correctly installed NextUI and configured Tailwind. However, I'm facing difficulty in getting the style to apply to NextUI modals and inputs.
Below is 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 the component where I'm encountering styling issues with NextUI components:
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-l from-zinc-800 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
Here's 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;
}
Would appreciate any assistance with this matter :)
Thank you!