Tailwind CSS Responsive Design Reference | Web Development

Breakpoint Prefixes

sm: # â‰¥640px
md: # â‰¥768px
lg: # â‰¥1024px
xl: # â‰¥1280px
2xl: # â‰¥1536px

text-sm md:text-base lg:text-lg # responsive text size
w-full md:w-1/2 lg:w-1/3 # responsive width

hidden md:block # hide on mobile, show on tablet+
block md:hidden # show on mobile, hide on tablet+

p-4 md:p-6 lg:p-8 # responsive padding
mt-2 md:mt-4 # responsive margin

grid-cols-1 md:grid-cols-2 lg:grid-cols-3 # responsive columns