calc(100vh - 44px) not working in TailwindCSS 3

Question

I tried all of these:

<ul className="overflow-y-auto bg-surface-50 rounded-b-lg  h-[calc(100vh_-_44px)] sm:h-fit ">
<ul className="overflow-y-auto bg-surface-50 rounded-b-lg  h-[calc(100vh-44px)] sm:h-fit ">

But when tailwind compiles, I still see no class h-[calc(100vh-44px)] and also no styling.

Answer 1

So it turns out the extra space after sm:h-fit and before h-[calc(100vh_-_44px)] was the culprit. This fixed it - removing all unnecessary spaces:

<ul className="h-[calc(100vh_-_44px)] sm:h-fit overflow-y-auto bg-surface-50 rounded-b-lg">