[BUG] - Some styling are off when combined with Tailwind CSS style

[KevinYobeth]

Describe the bug

Does nextUI works with tailwind? When I enable tailwind's @tailwind base; nextUI button's style is gone, but when I disable tailwind's @tailwind base, it show correct styling

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

import { Input, Button } from '@nextui-org/react';

const { Password } = Input;

export default function LoginPage() {
  return (
    <div className='h-screen bg-gray-800 p-20'>
      <div className='flex w-2/5 flex-col gap-5'>
        <Input label='Email' />
        <Password label='Password' />
        <Button shadow color='gradient'>
          Login
        </Button>
      </div>
    </div>
  );
}

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Create nextjs app and follow NextUI guideline
2. Install tailwind css
3. Add component
4. Comment and uncomment @tailwind base config

Expected behavior

I expect it to work together with tailwind CSS

Browser Used: Brave Browser

Screenshots or Videos

Operating System Version

Windows 11

Browser

Other (add additonal context)

[KevinYobeth]

Closing since it has been answered before. Apparently nextui has their own CSS base reset that conflicted with tailwind's.

#429
https://github.com/nextui-org/nextui/blob/main/examples/with-tailwindcss/src/index.css