How to calculate Height in tailwind css

Question

I'm currently facing an issue with calculating my container height, and it doesn't seem to be affecting the UI as expected. I've tried to set the height using the following code, but it's not taking effect:

h-[calc(${SectionHeight}px-45px)]

Where Section Height is The Parent Container Height i am calculation it becz also this Piece of code doesnt work

h-[calc(100%-45px)]

Answer 1

As per the documentation:

The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

Don’t construct class names dynamically

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes. Instead, make sure any class names you’re using exist in full:

Always use complete class names

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

You could consider using the style attribute instead, like (assuming this is React):

<div style={{ height: `calc(${SectionHeight}px - 45px)` }}>

Or, since SectionHeight is in pixels, we can subtract 45 in JavaScript-land like:

<div style={{ height: SectionHeight - 45 }}>

Since we pass a number type, React will automatically append the px unit.