Tailwind base remove border and padding

I’m currently working on a project using the Calendar component from PrimeReact, and I’ve encountered an issue where the border and padding seem to be missing. I have a themes.css file in my public folder because I want the website to allow dynamic theme switching. This file is imported in the section.

However, if I import the theme CSS directly from the PrimeReact node_modules folder instead, the padding and border are correctly displayed.

One thing I’ve tried is removing Tailwind’s base styles from globals.css, and when I do that, the padding and border reappear, but obviously, this breaks the styling for other components. When I inspect the Calendar component, it shows Tailwind’s base layer applied first, followed by PrimeReact’s styles.

How can I resolve this conflict between Tailwind’s base styles and PrimeReact’s theme?

globals.css

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

@layer tailwind-base {
  @tailwind base;
}

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

You need to sign in to view this answers