-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add svh
, lvh
, and dvh
values to default theme
#11317
Conversation
This new utility is designed to be backwards compatible, serving both 'vh' and 'dvh' in the meantime. it name 'dvh' is inspired by the pull request on Tailwind CSS, which will include 'dvh' as a default theme option in the future. For more information, refer to tailwindlabs/tailwindcss#11317
This new utility is designed to be backwards compatible, applying both `vh` and `dvh` in the meantime. it name `min-h-dvh` is inspired by the pull request on Tailwind CSS, which will include `dvh` as a default theme option in the future. For more information, refer to tailwindlabs/tailwindcss#11317
Global Would there be a way to fallback from Currently using the following workaround, @layer utilities {
.min-h-screen {
min-height: 100vh; /* Fallback */
min-height: 100dvh;
}
.h-screen {
height: 100vh; /* Fallback */
height: 100dvh;
}
} because the following classes result in a CSS conflict error. <div class="min-h-[100dvh] min-h-screen"></div>
|
svw: '100svw', | ||
lvw: '100lvw', | ||
dvw: '100dvw', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm confused, it this wanted?
What is the status of this matter? If in the same class, if I add h-dvh h-screen there is a conflict |
This PR adds support for basic dynamic viewport units to the
height
,min-height
, andmax-height
utilities out of the box:h-svh
height: 100svh
h-lvh
height: 100lvh
h-dvh
height: 100dvh
min-h-svh
min-height: 100svh
min-h-lvh
min-height: 100lvh
min-h-dvh
min-height: 100dvh
max-h-svh
max-height: 100svh
max-h-lvh
max-height: 100lvh
max-h-dvh
max-height: 100dvh
These are a newer CSS feature that help solve the problem of building full-height interfaces on mobile devices where parts of the UI are dynamically shown/hidden as the user scrolls, like the URL bar on iOS Safari.
This has always been possible in Tailwind of course by just adding these values to your config file, but this PR adds the values above by default so they are just there out of the box when you create a new project.
We've opted not to add the equivalent utilities for the
svw
,lvw
, anddvw
units for now because there's not really any real-world examples I can find where they are beneficial, but of course you can always add them to your config or use arbitrary values:Similarly, if you need values other than
100
in your project, you can use arbitrary values for those as well:So at the end of the day this is very much a convenience PR but because these particular values are so useful I think it's worth helping people save the extra 5 characters out of the box.