search

barvian / fluid-tailwind

Build better responsive designs in less code.
https://fluid.tw
MIT License
1.24k stars 19 forks source link

Problem with breakpoints #59

Closed aydeeen closed 1 week ago

aydeeen commented 1 week ago

Great plugin!

Just one issue, when I try to add fluid breakpoints, it doesn't work. Basically it always behaves like its going from default smallest to default biggest. In the screenshot, you can see that I added md to lg breakpoint, but it doesn't work for some reason.

Screenshot 2024-11-11 155442

As far as I can see, it adds css but without breakpoints. Any help would be appreciated.

barvian commented 1 week ago

Hi 👋, thanks for the kind words! Is it working like this for you locally?

aydeeen commented 1 week ago

You're welcome! I started new project with ti and I am loving it. Yea it works exactly like that. Maybe I was wrong. I thought that when it for example reaches "sm" breakpoint, that padding will be 0 in that example

barvian commented 1 week ago

Ah yeah, the fluid variant (~md/lg in this case) only changes the start/end breakpoints for the clamp() and doesn't wrap the whole thing in media queries 👍 . You can combine them with media queries if you want though, e.g.

<div class="md:max-lg:~md/lg:~p-5/16">

Sandbox

Is that closer to what you were looking for?

aydeeen commented 1 week ago

Ahh got it now! Thanks bro. Yea that was exactly what I was looking for. It's all clear now. Thank you so much for finding time for this.

You're a great guy!

barvian commented 1 week ago

No problem! ✌️