Responsive Basics

Responsive Design in Tailwind

Tailwind is mobile-first: unprefixed classes apply to all screen sizes; prefixed classes apply from a breakpoint upward.

Breakpoints:

• sm: — 640px+
• md: — 768px+
• lg: — 1024px+
• xl: — 1280px+
• 2xl: — 1536px+

<!-- Mobile: text-base, Tablet+: text-xl, Desktop+: text-3xl -->
<h1 class="text-base md:text-xl lg:text-3xl">Responsive Title</h1>

<!-- Stack on mobile, side-by-side on tablet -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="w-full md:w-1/2">Left</div>
  <div class="w-full md:w-1/2">Right</div>
</div>

<!-- Padding increases at larger screens -->
<div class="p-4 md:p-8 lg:p-12">Content</div>

Your Task

Create a heading and paragraph that use md: and lg: prefixes to change text size and padding at different breakpoints.