Hello, i have a problem that Skeleton component has class something .m-18320242 and i am using tailwindcss v4 (in my index.css @import "tailwindcss" important (important for overriding my company components styles)). Tailwind makes .m-18320242 result in margin: calc(var(--spacing) * 18320200) !important, so my margins are not from this planet. How can i preserve mantine styles from being affected by tailwindcss? Now i found a way to add prefix for tw (in index.css i added: @import "tailwindcss" prefix(tw) important;) , but it is a mess to add everywhere "tw:".
#Tailwindcss v4 with Mantine v7
3 messages · Page 1 of 1 (latest)
Actually there is not difference with or without important and changing order of mantine layer with tw utilities order; because there is no margin on skeleton component so it picks margin: calc(var(--spacing) * 18320200) from tailwind layer
I haven't heard of similar issues before. I assume you are using tailwind with just a browser library which parses classes in the runtime. The common approach is to use the integration tool with your framework which would extract only those tw classes that are relevant for your project.