NextUI components' built-in styles are not being applied. How can I solve it?

[ryusudol]

I successfully downloaded NextUI with TailwindCSS and Famer Motion, and everything works well. But, the only problem is that the built-in style of NextUI component isn't working. I set all configs right following the official documents and satisfied all required versions of React.js, TailwindCSS, and Framer. I have no idea why this happens. Is there anyone who suffered from the same problem or know how to solve it? Thank you :)

Not working like this

<div className="flex gap-3 items-center">
    <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
    <Avatar name="Junior" />
    <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
    <Avatar name="Jane" />
    <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
    <Avatar name="Joe" />
</div>

tailwind.config.js

import { nextui } from "@nextui-org/react";

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./public/index.html",
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()],
};

Versions of modules

"@nextui-org/react": "^2.4.6"
"framer-motion": "^11.5.2"
"tailwindcss": "^3.4.10"

[wingkwong]

This is what I see. You may provide a sandbox so that we could have the exact same environment. Also you may check if the file is inside src directory, which you defined in tailwind config.

[ryusudol]

I just decided not to use NextUI for this project for now. But thank you :)