DEV Community

Discussion on: Do you code mobile-first?

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.