Skip to content

Instantly share code, notes, and snippets.

View TheLazron's full-sized avatar
🌸

Aryaman Sharma TheLazron

🌸
View GitHub Profile
@TheLazron
TheLazron / guide.md
Created June 7, 2023 12:45
Setting up Mantine with Tailwind CSS using emotion cache

Working with Mantine and Tailwind CSS

If you have tried setting up Mantine and Tailwind in your project, you would have faced this issue where mantine and tailwind styles end up conflicting with each other. As a result it introduces several unwanted behaviours like your buttons disappearing and only showing when hovered over.

Cause

The reason this issue arises is mantine's styles getting overridden by tailwinds. Specifically, tailwinds preflight styles. These preflight styles are applied by default by tailwind in order to normalize styles across across different browsers. As a result mantine's style aren't applied correctly

Solution