Tailwind Widths and Heights
Can anyone tell me why tailwind seems to be missing a lot of heights / widths out of the box? Why do they stop at
w-96? Why are there big gaps between the numbers?
I know I can add other sizes to my config, but it seems like I might be doing something wrong. Similarly, why do max-w not have any numbers? what should i be using there instead?13 Replies
i think the idea is that once it's above 96, aka 384px, that's approaching the width of smart phones.
and tailwind is designed from a mobile first philosophy(hence how their sm: md: works), and setting w > (w of mobile screen) would break on certain mobile screens!
The big gaps are to enforce a "design system"
it's a bit harder to explain, but rarely do you need something specifically "277px". If you need something like that, chances are you're doing something wrong!
If you notice yourself needing something larger than 96, try using % like w-1/2 or w-2/3.
and max-w uses sizes instead of numbers.
I think it's because tailwind's numbers are usually 1 to 4(px) or 1 to .25(rm)
and writing something like
max-w-168 for 2xl just doesn't look as good lol
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
big fan of native wind 🙇♂️
but max / min related to what?
it seems to me that if youre only keeping small absolute sizes then you have 2 options. either youre starting with the size of the screen and working down from there or youree starting from your absolute sizes and building up
it seems like the top-down is what i should be trying to do if there arent specific max / min widths?
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
sorry. im new to doing styling correctly
ok fair enough
so if i have something like a corset im trying to implement. where i want it to be (for example) 1000px wide and centered, but if your screen is bigger than that it should just add padding
normally i would do that with a 1000px width + mx-auto
is there a different way to do that?
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
and in tailwind i would have to use w-[1000px] to do that?
since i dont have absolute sizes in that range
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
ok sorry right. so how can i set a max-width of 1000px?
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
ok. that makes sense i think. i didnt realize 5xl was an option
ok. i think that answers it
thanks a lot. i appreciate the help