Responsive Breakpoints

We briefly touched on this before. Tailwind uses a “Mobile First” approach.

Unprefixed utilities take effect on all screen sizes, starting from the smallest phone.

Prefixes override these at specific screen sizes:

• sm:: 640px
• md:: 768px
• lg:: 1024px
• xl:: 1280px

<!-- Text is red on mobile, blue on tablet, green on desktop -->
<h1 class="text-red-500 md:text-blue-500 lg:text-green-500">
  Resize your browser!
</h1>