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.

Are you sure tailwind watches the file where this class is? What is the `content` section of your config file? How do you compile styles? — Ihar Aliakseyenka, Jun 09 '22 at 20:53
Your syntax looks ok, then. Must be something else that we can't see from here. — isherwood, Jun 09 '22 at 20:59
The generated class will look like this in css btw: `h-\[calc\(100vh-44px\)\]` — ShamPooSham, Jun 09 '22 at 21:02
so I'm using it on a ```ul``` like this ```
``` the weird thing is that it complies the other classes but not this one . — سعيد, Jun 10 '22 at 10:00

score 2 · Answer 1 · edited Mar 11 '23 at 15:42

2

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">

edited Mar 11 '23 at 15:42

kelsny

23,009
3
19
48

answered Jun 10 '22 at 11:35

سعيد

1,547
1
14
32

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

1 Answers1