Cwicly / Tailwind breakpoint differences

Hi all,

Not sure if I’m missing something or if it is a Cwicly decision, but it seems there is a breakpoint missing when reseting Cwicly’s breakpoints to Tailwind’s.

In Cwicly, base breakpoint is called sm, and covers 0-768px range.


In Tailwind, the sm breakpoint starts at 640px, so base seems to cover 0px-640px, am I right?

So, shoudn’t there be a additional breakpoint at 640px in Cwicly?

By the way, 0-768px looks like very extended range, and I’m convinced that we need a smaller minimum breakpoint.

1 Like

I think this should be addressed ASAP, since if people start building sites with these breakpoints and want to switch to the actual TW breakpoints later, they will have the same issue when switching from Cwicly’s default to TW breakpoints.

I noticed this as well. I assume there is a reason for it?

I think there is a misunderstanding. Base is @min 640px

Screenshot 2024-02-12 at 16.12.55

Yes, base shouldn’t be sm, it should be below sm, so that we can style sm differently from base, like this:


And I set base like this:



@yankiara Ah I see now. @Louis @Araminta is the current default TW breakpoint configuration intended to accommodate the sm TW breakpoint?

Hello @yankiara and @hopscotch,

Thank you for bringing this up.

Indeed, the Tailwind breakpoint default setup was over-engineered to try and replicate the 5 screens available in the default configuration.

An extra breakpoint is necessary within Cwicly when working with non-Tailwind styles.

I’m sorry for the trouble and inconvenience this may have caused on your end.

Rest assured, we will have a fix and transfer solution in the next update if you have already applied values to sm on the non-Tailwind part of things.



Hi @Louis, I’m not sure to understand this.

You can style base breakpoint with TW, using non-prefixed classes.
Then you can be more specific with prefixed ones: sm:...

I don’t see any difference between TW and non-TW.
Maybe I didn’t get your point?

Anyway, thanks for the update.

Hello @yankiara,

That’s why we had the main breakpoint available in the non-interactive states: Pseudo state Management - Documentation

Still useful in a lot of cases, but doesn’t eliminate the need for that extra breakpoint when working with the default screens in non-Tailwind.


@Louis I understand you now thank you for clarifying.

Thanks, I had totally overlooked this part.
But it looks really non intuitive to me, and I don’t see why breakpoints should behave differently in TW and non-TW modes. The mechanics seem universal to me, base by default, then media query or prefix class for more specifics.

Hopefully it will be fixed anyway :slight_smile:

Hmm now should we not still have a sm breakpoint by default as well? Say I want to apply a class to only the sm breakpoint. sm:lowercase or the like?

Ha ha, that’s a different story.

And yes, we could imagine prefixes like sm:abc (sm only), sm-:abc (sm and above), -sm:abc (sm and below), sm-lg:abc (sm to lg) :wink:

But I’m not sure there are so many usecases.

Maybe this can be configured in TW config for those who need it, by the way.

Oh yes that would be handy! My example sm:tw-class can be added manually. That will work for now.

Are you sure???
sm prefix should apply to sm and above.

@hopscotch, it DOES already exist in TW :slight_smile:

So your example would be sm:max-md:tw-class.


@yankiara aye in the UI it works well :slightly_smiling_face:


@yankiara the TW breakpoints missing sm issue is now resolved with the update. Just click ‘Reset to Tailwind Breakpoints’. Many thanks for the brilliant work @Louis


Hi @yankiara,

Thank you for bringing this to our attention!

As rightly pointed out by @hopscotch we added the base breakpoint with

Kindly let me know if this is the case on your end.

Additionally, if you wish to move any styles between breakpoints, you can do so with the new Transfer / Exchange Breakpoints feature.

@hopscotch shared a great explanation of this here:

Rest assured, we’ll have dedicated documentation on this feature as soon as possible.