SCSS Math with theme()?

[hrishikesh-k]

Hello all!

This might be a dumb question, but I'm new to tailwind and trying to setup fixed height by subtracting padding, margins and header height. So, I have something like p-5 for body and header is h-20 with mb-5. And so on.

As you can see, I need the value of mb-5 + mb-5 + mb-5 (p-5 and m-5 have the same value). So, I was wondering if I could do something like: theme('height.20') + (3 * theme('margin.5')). I'm not sure if this is possible or not, but I'm getting an error Undefined operation: "3 times theme("margin.5")".

Is this doable or do I need to add it three times?

[simonswiss]

Hey!

That should work, if you wrap this calculation in a calc() function in your CSS.

Here's an example using roughly the same setup that you're mentioning (the p-5 class is applied on the body directly with @apply:

https://play.tailwindcss.com/mbSvnirCj2?file=css

Hope it helps 👍
– Simon

[hrishikesh-k]

Yes, I did try it with calc() and it worked. Just to confirm, it won't work without calc(), right?. I was trying to store it as a SCSS variable as I need to use it multiple times. I can't use comma separated selectors because I need to subtract different values from the value generated by the math above.

Thanks for the help!