Kevin Powell - Community•7d ago

How to use dynamic viewport units with a fallback in tailwindCSS?

 <div className="h-screen h-[100dvh]</div>

 <div className="h-screen h-[100dvh]</div>

heres what im trying to do, i recently came across dynamic viewport units that take into account the address bar on phone browsers! same thing with min-h-screen and min-h-[100dvh] i did some research and i saw that browser support isnt 100% yet so ive got to use a fallback right which i always use previously before discovering dvh id always use h-screen etc but for some reason this line of code doesnt seem to work when i checked on phone! i did some digging around as well and wasnt able to find a working solution with a fallback i thought id ask here.. what am i doing wrong here? how can i use dynamic viewport units that take into account the addressbar and show no scroll just like how h-screen works on laptops! also theres dvh, svh, lvh, im kind of confused as to whats really the best unit to use and how they differ from each other, its my first time coming across these so im kind of lost thanks in advance

10 Replies

StefanH•7d ago

I'd write a custom class for this. Tailwind doesn't force you to only write with existing classes https://tailwindcss.com/docs/styling-with-utility-classes#using-custom-css

Styling with utility classes - Core concepts

Building complex components from a constrained set of primitive utilities.

StefanH•7d ago

Especially if you're doing complicated grid template area setups or something very specific like you are doing here, writing custom css is just clearer You could use some kind of naming scheme to differentiate custom classes from tailwind classes. I use an _ prefix for scoped classes that are local to my vue component, borrowing from the common m_ naming scheme used in many languages. You could use a g_ prefix or something as well

chikanlegbeesOP•7d ago

I don’t get it.. how does that solve my problem ?

StefanH•7d ago

What i'm saying is just write your own class to have the styles you want You don't have to use tailwind classes for everything Especially if there's no good reason for it

chikanlegbeesOP•7d ago

Makes sense but how does one go about using dynamic view port units with a fallback?

Choo♚𝕂𝕚𝕟𝕘•7d ago

Make use of overrides. For example:

.container{  
  min-height: 100vh;
  min-height: 100dvh;
}

.container{  
  min-height: 100vh;
  min-height: 100dvh;
}

What happens here is the 100dvh will override the 100vh in browsers that understand it. For the ones that don't understand it, the 100dvh is ignored, so the 100vh is used. Note that if you have a linter that lints CSS, it may give a warning due to the possibility of accidental override, but this is intentional, so you can ignore the warning.

chikanlegbeesOP•7d ago

So I can’t do it in tailwind? I’d have to do it in CSS ? I thought I could’ve done the override directly in tailwind as well like the code I pasted there

Jeremy•7d ago

In Tailwind the order of the classes does NOT ensure which style will come last (and therefore win).

Choo♚𝕂𝕚𝕟𝕘•7d ago

It was already mentioned above that you can use regular CSS alongside Tailwind. You can also define your own Tailwind classes. What you should not rely on is one class overriding another. Both vh and dvh have to be defined in the same class.

chikanlegbeesOP•7d ago

thanks a lot all of you! i was quite confused in the ended up doing this @Choo♚𝕂𝕚𝕟𝕘 @Jeremy @StefanH

.containerdvh {
  min-height: 100vh;
  min-height: 100dvh;
}

.containerfixed {
  height: 100vh;
  height: 100dvh;
}

.containerdvh {
  min-height: 100vh;
  min-height: 100dvh;
}

.containerfixed {
  height: 100vh;
  height: 100dvh;
}

for both overrides!

Gaming

Programming

How to use dynamic viewport units with a fallback in tailwindCSS?

Did you find this page helpful?