Tailwind and Primereact in React app, how to setup App.css

Question

App.js:

import React from "react";
import "primereact/resources/themes/saga-blue/theme.css";
import { PrimeReactProvider } from "primereact/api";
import "./App.css";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Login from "./pages/Login";
import Register from "./pages/Register";

function App() {
  return (
    <PrimeReactProvider>
      <div className="">
        <Router>
          <Routes>
            <Route path="login" element={<Login />} />
            <Route path="register" element={<Register />} />
          </Routes>
        </Router>
      </div>
    </PrimeReactProvider>
  );
}
export default App;

App.css:

@layer tailwind-base, primereact, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}

@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Ubuntu", sans-serif;
}
.login-page,
.register {
  height: 100vh;
  background-color: aliceblue;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #a5f3fc;
}

I want to use primereact and tailwind css in react, I have followed the documentation and write layers in App.css but nothing works.

If I comment out @layers of the css in top part, only then my primereact component'style is taking action, but other styles get affected

Answer 1

Make sure you have installed Tailwind CSS and its dependencies properly in your project

@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");

/* Include Tailwind CSS */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* Include PrimeReact styles */
@import "primereact/resources/themes/saga-blue/theme.css";

/* Custom styles */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Ubuntu", sans-serif;
}

.login-page,
.register {
  height: 100vh;
  background-color: aliceblue;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #a5f3fc;
}