Mantine7 + TailwindCSS (T3 stack) + CSS modules | Mantine | Page 1

drifting glen Jan 10, 2024, 5:35 PM

#

Hi,

I'm trying to use the community template https://github.com/WillKirkmanM/mantine-t3-template to bootstrap a Mantine project. However, I can't seem to use MantineUI components without CSS being messed up. I've attached an example of how the DateTimePicker looks. What do I need to change in my configs to make this work? I've tried the @layer solution from this issue https://github.com/orgs/mantinedev/discussions/1672?sort=top#discussioncomment-7870643 and I followed the Getting Started guide correctly to no avail.

Thanks in advance

GitHub

GitHub - WillKirkmanM/mantine-t3-template: 🎈 Mantine + T3 Stack Sta...

🎈 Mantine + T3 Stack Starter Kit. Contribute to WillKirkmanM/mantine-t3-template development by creating an account on GitHub.

GitHub

How can i use tailwind css and mantine together ?? · mantinedev · D...

Hello Team 👋 !! while working on big project . I'm facing big trouble for every single thing such as notification , modal etc . For All those stuff i have to write it from scratch which is very...

solar elm Jan 10, 2024, 5:39 PM

#

Have you added the css for the date pickers?

drifting glen Jan 10, 2024, 5:41 PM

#

Do I need to explicitly do so? I don't see the CSS code for Mantine's regular components: https://mantine.dev/dates/date-time-picker/

DateTimePicker | Mantine

Capture datetime from the user

#

I've used Mantine for other projects before and never had to add any additional CSS to get the base styling to work

#

My bad, I solved it. Before Mantine v7 I don't think this was necessary, but you must now import @mantine/date's specific styles, as it says in the installation step for dates: https://mantine.dev/dates/getting-started/#installation

Getting started | Mantine

Get started with @mantine/dates package

#Mantine7 + TailwindCSS (T3 stack) + CSS modules