Responsive Design

Tailwind responsiveness is mobile-first

Tailwind responsiveness is mobile-first.

Styles without screen size specified is applied to screen sizes less than the specified screen size styles.

  • Default styles are applied to smallest screen sizes first.
  • Additional responsiveness attributes added is applied to the bigger screen sizes.
"mb-80 md:mb-8" // mb-80 is applied to smaller screen size than md; NOT greater

"style" <= "responsive-style"

Responsiveness

Different width size per screen size

className="w-16 sm:w-12 md:w-32 lg:w-48"

// sm = 640px
// md = 768px
// lg = 1024px
// xl = 1280px
// 2xl = 1536px