Currently, I am working on a project that involves using PrimeReact's Calendar component. However, I have run into an issue where the border and padding are missing from the design. To achieve dynamic theme switching, I have a themes.css file in my public folder which is imported within the <head> section.
Interestingly, when I directly import the theme CSS from the PrimeReact node_modules folder instead of my public folder, the padding and border are displayed correctly.
I attempted to address this by removing Tailwind's base styles from globals.css. This did cause the padding and border to reappear on the Calendar component, but it also disrupted the styling for other components since Tailwind's base layer was applied first followed by PrimeReact's styles.
How can I effectively 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;
}