Tailwindcss: Max Width 100vw Feature Request

[Acidic9]

There doesn't seem to be a class for max-width: 100vw which seems quite handy.

Has this been thought about and intentionally not added?
Or do people agree maybe this should be added?

[michaelmano]

max-w-full would be 100% and that would be either the width of the screen or the current container (unless you have overflow issues). Normally you would just end the container if going above that again.

[davemcorwin]

Having vh and vw units for font sizes, width, and height would be a nice addition. They're great for making fonts REALLY responsive.

[adamwathan]

What's a common use case for max-width: 100vw? I've never needed it personally but if enough people think it's valuable to include by default I'm open to it. In the mean time you can always add that value in your config file 👍

[sandren]

Having vh and vw units for font sizes, width, and height would be a nice addition. They're great for making fonts REALLY responsive.

@davemcorwin You can actually already do this with Tailwind. Set a responsive value for font-size on your :root or html element and that will apply a responsive value to all rem-based declarations in the entire stylesheet.

So if you set something like :root { font-size: 1.25vw; } or—for better accessibility—something like :root { font-size: calc(0.5em + 1vw); }, then all of Tailwind's rem-based utility classes (width, height, margin, padding, font size, etc.) instantly become responsive.

I do this for all of my own websites built with Tailwind and it has worked great! 😄

[leMaur]

What's a common use case for max-width: 100vw? I've never needed it personally but if enough people think it's valuable to include by default I'm open to it. In the mean time you can always add that value in your config file 👍

Pay attention using 100vw for width, I had a lot of cross browsing problems in the past.
When all is good on MacOSx, a little overflow to the right appear on Windows, due to the scrollbar (always visible).

[adamwathan]

Going to close this due to inactivity, can add this in your own config easily but still open to adding it by default if there are good examples of when it's useful and a lot of people would like it included.