How why to replace min-width in my CSS
I've been getting into replacing all the styles in my app with tailwind recently. I've mostly found this to be rewarding, but I'm confused about the lack of options available for
min-w-*. I asked a question about it here before and I was told that using min-width with specific pixel values was generally not a good idea. That being said, I'm having a hard time getting the desired behavior I need without it. For instance I have the following div:
This div is used as the root of a popup in my UI. The popup lists a username which could be very short or up to 32 characters long. The popup looks weird when its too thin so I set it to min-w-300 and then let it grow with the size of the content otherwise. How can I accomplish this behavior without using min-width? I would also really like to understand why using min-width with a specific pixel value might cause problems.2 Replies
Hey! What difference have you noticed with just using
w-?
Also, some problem would occur on smaller screen sizes where it could introduce unnecessary x scroll/overflow.
It is generally a good idea to follow the tailwind’s responsive concept on their docs.
https://tailwindcss.com/docs/responsive-designResponsive Design - Tailwind CSS
Using responsive utility variants to build adaptive user interfaces.
let me look at that doc, but how would you redo the div ^ so that i could get the behavior i described
basically grow with the text, never be thinner than 300px (its ok if its not 300 exactly. i know tailwind prefers their xs, sm, md, etc)
i just looked through the document. that doc seems to be talking mostly about screen sizes
i acknowledge these are important, but i dont see how that pretains to my use case exactly
my problem is more about changing the size of a div depending on the content within
when i use just
w- then the thing wont grow as it needs to and the child components leak out
oh thats interesting though. i just tried w-[300px] min-w-max. i think that worked....
then i can just convert the 300px to whatever the tailwind size is