DEV Community

Discussion on: Do you code mobile-first?

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">
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.