How to add padding, margin and other css properties dynamically?

[lalit2005]

Manitine is just incredible and the docs are also so slick.
As soon as I saw the components of Mantine, I decided to switch to Mantine from Chakra UI (Chakra is good too 😜 )

In Chakra UI, we can dynamically add all the css properties to components, for example - to add margin and padding of 10px and background color of #eb4034

<Box m="10px" p="10px" bgColor="#eb4034">
    <Text>Hello World</Text>
</Box>

Can you please tell how can I achieve this in Mantine. I was not able to find any docs related to this. 😞
Thanks in advance :)

[cstrat]

The simplest way would be to do this:

<Box style={{ margin: '10px', padding: '10px', backgroundColor: '#eb4034' }}>
    <Text>Hello World</Text>
</Box>

You could also use jss. I have only tried this a couple of times, looks pretty cool but I haven't needed to deviate from the standard styles much so just use the above.

[rtivital]

Hi, you can add styles with style prop just like in any other component or element, this prop always have highest priority. You can also use className and add your styles with any css solution (jss is not required).

[lalit2005]

Yeah that's possible too, but are there any predefined props for adding styles, like how Chakra UI has?
Eg. For margin in x axis, do we have any prop for every component such as mx in Mantine?

[cstrat]

In another ui-library I use (evergreen) - they have implemented ui-box to do what you're talking about. It actually is pretty handy.

[lalit2005]

Or can we use Tailwind CSS with Mantine?? 🤔

[Xapu1337]

Or can we use Tailwind CSS with Mantine?? 🤔

yeah @rtivital how compatible is mantine with tailwind?
for me its mostly working with exceptions like Text component does not change when adding something like "text-9xl2

[rtivital]

By default all components support className and style tags, everything should work fine, there might be some css specificity issues due to style tag usage in some components, refer to documentation or source code to see how to control these values