CODEWITHSUNDEEP
tailwind-css
mstdmstd
mstdmstd

Reputation: 3071

How to make extra small devices design with tailwindcss?

Reading https://tailwindcss.com/docs/responsive-design#overview docs I do not see any classes for extra small devices(like iPhone 5)

So if I need to made different design for iPhone 5 and nexus 7 is there is a way to make it with tailwindcss ?

Thanks!

Upvotes: 7

Views: 18764

Answers (2)

user26337556
user26337556

Reputation: 1

Yes there is way make things responsive for xs devices. How I achieve this is with a mobile first appraoch. SO instead of styling everything for md or lg devices, I would set for eg. p-20 md:p-10, this way I get the exact design I want on xs devices and tweak as necessary on bigger devices.

Hope this was helpful.

Upvotes: 0

Digvijay
Digvijay

Reputation: 8927

What this means is that unprefixed utilities (like uppercase) take effect on all screen sizes, while prefixed utilities (like md:uppercase) only take effect at the specified breakpoint and above.

e.g. text-xs sm:text-base md:text-lg. In such case font-size will follow:

  • text-xs: All the screens starting from 0px to 639px will follow this. font-size: 0.875rem;
  • sm:text-base: All screens starting from 640px to 767px will follow font-size: 1rem;
  • md:text-lg: All screens starting from 768 to 1023 will follow font-size: 1.125rem;

So your iPhone 5 being 320px will follow text-xs. And your Nexus 7 width 600px will still follow text-xs.

If you still want to add additional screens then you can do:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'xxs': '540px', // min-width
    },
  }
}

e.g. text-xs xxs:text-sm screens will follow text-xs till 539px then Nexus 7 will follow text-sm till 639px.

Upvotes: 20

Related Questions