Just tried out the example pasting the pricing block.
The responsive classes like lg: sm: etc. may not be aligned with the breakpoints set in cwicly.
My guess is that tailwind operates with mobile first media queries set to “min-width” values while cwicly uses “max-width” values in the generated CSS.
By the looks it seems that the logic is flipped.
Environment info
Yeah you have to change the breakpoints to match it to tailwind. There is a tailwind icon on the breakpoints modal, if you press it you switch to mobile first and „align“ with tailwinds config.
Then, also copying and pasting should work as expected
100% correct. This is not a bug, this is covered in the getting started documentation and the first look video that was released and @Louis also showed the the most recent live he did.
thanks for the info @Wolfgang and @StrangeTech!
I leave that link here for future reference:
does the switch to tailwind breakpoints mess up your current responsive settings for components/blocks?
Hello @oppi,
I think it’s better to look at it as having a unified experience within Cwicly. Basically, the Tailwind integration makes sure that Tailwind will work with any breakpoint configuration you currently have in Cwicly.
However, when you import designs made in Tailwind, those designs were made for a specific set of breakpoints (most often the default Tailwind ones), which implies that you will have to switch to them in order to use the designs, in turn changing your responsive settings to the new ones.
Cheers,
Thanks @Louis for your reply. So it’s better to start from scratch I reckon.
That’s a bit disheartening since I was just started my first cwicly project not long ago with custom components and a design system, but I fully understand. Thanks again!
Is there a quick tutorial on how to set this up for a new person, who hasn’t used breakpoints at all yet, and wants to start off using Tailwind? Any suggestions? If i am understanding correctly, Tailwind starts with mobil first and I can match that up? I typically design with the full screen first but I can adjust my thinking if needed. I am just now laying my site out officially with responsiveness… So I am flexible and so excited about Tailwind and this integration!!!
