NextUi conflict with tailwind css

Question

When I added NextUIProvider, it caused a conflict with Tailwind CSS, resulting in a disorganized appearance of the website's CSS. I attempted to resolve the issue by adding !important or prefix to Tailwind's configuration, but these solutions did not work. Are there any other solutions to this problem? I use vite btw

Answer 1

I resolved the issues by setting disableBaseline to true.

<NextUIProvider disableBaseline="true">
   <App />
</NextUIProvider>

Answer 2

you may want to use only the stable components from nextui, here is the roadmap

Answer 3

You need install "Tailwind Variants" from NextUI (first tailwind CSS)

all you need is here: https://www.tailwind-variants.org/docs/getting-started

Answer 4

I ran into the same issue with vite.js. The tailwind.css styles weren't working for me with nextui, but this setup did the trick:

tailwind.config.js:

const { nextui } = require("@nextui-org/react");

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

index.css:

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

Main.jsx:

import React from "react";
import ReactDOM from "react-dom/client";
import { NextUIProvider } from "@nextui-org/react";
import App from "./App.jsx";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <NextUIProvider>
      <App />
    </NextUIProvider>
  </React.StrictMode>
);

This approach worked for me. I was able to style the containers with tailwind.css and use the NextUI components. If anyone else ran into the same issue I did, that was my fix. Hope it helps, greetings!