DEV Community

Discussion on: Do you code mobile-first?

Collapse
decentralizuj profile image
decentralizuj

I am back-end dev, but on solo-projects I must work on front-end too. I use mostly bulma, as it doesn't require any JS in rails (like bootstrap), but I saw some amazing things with Tailwind, so I have one question here (I know I can google this, but discussions are to ask, no?)

You say desktop-first (me too), but before Tailwind you used to go mobile first, which means you work desktop-first in Tailwind.

@manen say Tailwind require you to do mobile-first.

I would highly appreciate short answer about this, since I will use Tailwind in my current project Moriarty, to make GUI. Thanks!

Collapse
shareef profile image
Mohammed Nadeem Shareef

by default tailwind provide mobile first layout but you can easily configure it.

Collapse
souksyp profile image
Souk Syp.

Yes use Tailwind. Go desktop. Responsiveness can be added easily later if you know more about Tailwind.

Thread Thread
decentralizuj profile image
decentralizuj • Edited on

I'm sorry, I didn't define the question very well. Does Tailwind require mobile first, or desktop-first, or doesn't matter? That's why I quoted answer that say "Tailwind require you to go mobile-first".

I know how to work on front-end, but I don't like it. I have knowledge (and work with) html, pure css or scss, template engines like haml, frameworks like bulma and bootstrap, but never used Tailwind (anyway that's not a problem).

I just need answer on this, from someone who used Tailwind.

Thread Thread
souksyp profile image
Souk Syp.

It doesn’t matter. It’s just a css framework.

Thread Thread
tqbit profile image
tq-bit • Edited on

tailwind provides you utility classes. for instance, going from a 3-col grid view on desktop to 1-col on mobile is as hard as this:

class="grid-cols-1" <- smaller gadgets
class="md:grid-cols-2" <- medium
class="lg:grid-cols-3" <- larger devices

it's especially handy with Javascript framework components, but perhaps not the best choice if you cannot reuse templates or partials

Thread Thread
souksyp profile image
Souk Syp.

You can put these classes on the same element like this for responsiveness. Cool ?

<div class="grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
</div>
Enter fullscreen mode Exit fullscreen mode

Read the docs here

Thread Thread
theowlsden profile image
Shaquil Maria

@decentralizuj to answer your question, tailwind does not require you to work mobile-first, but they do encourage it. Their breakpoints work with min-width so it would be easier if you start mobile-first.