#From tailwind to Mantine

5 messages · Page 1 of 1 (latest)

faint idol
#

Hey, I'm a pretty heavy tailwind user and have recently jumped to mantine. I'm loving mantine for its components, but I'm kind of used to tailwind kind of responsive styles as such was wondering if there was any way I can do styles like "<Text fz={{ base: 32, lg: 48 }} weight={600}> Lorem ipsum dolor </Text>, instead of manually writing media queries again and again.

I did go through the documentation but there's no information regarding such kind of responsive styles. I want to know if I can apply the same kind of responsive styling to all css attributes? Like for instance if I wanted to change flex direction from row to column up from "md" breakpoint can I do <Text flex-direction={{base:'row', md:"column"}}>Hello</Text>.

Can I use this kind of style for all css attributes or no?

serene aurora
faint idol
#

"You can use object syntax to add responsive styles with style props. Note that responsive style props are less performant than regular style props, it is not recommended to use them in large lists of elements."

Saw this in the documentation. So such kind of styling is not recommended? Also, can I completely give responsive styles to all css attributes or only selected ones?

serene aurora
#

I would also recommed tho read through this doc to understadn the recommended way and other styles