Understanding Tailwind Breakpoints
Tailwind uses mobile-first breakpoints like sm, md, lg, xl, and 2xl. You apply styles for larger screens using these prefixes.
Example:
<div class=“text-sm md:text-lg lg:text-xl”>
Responsive Text Size
</div>
Mobile-First Approach
By default, Tailwind styles apply to mobile screens. You then override styles for larger devices using breakpoint prefixes.
Example:
<div class=“p-2 md:p-6”>
Small padding on mobile, larger on desktop
</div>
Responsive Layouts with Flex & Grid
Use flexbox and grid utilities with breakpoints to create layouts that adapt across screen sizes.
Example:
<div class=“grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4”>
<div class=“bg-blue-200 p-4”>Item</div>
<div class=“bg-blue-300 p-4”>Item</div>
<div class=“bg-blue-400 p-4”>Item</div>
<div class=“bg-blue-500 p-4”>Item</div>
</div>
Showing & Hiding Elements
Tailwind allows you to show or hide elements based on screen size using utilities like hidden, block, etc.
Example:
<div class=“hidden md:block”>
Visible only on desktop
</div>
<div class=“block md:hidden”>
Visible only on mobile
</div>
Responsive Typography & Spacing
Adjust font sizes, margins, and padding across different devices for better readability and UI balance.
Example:
<h1 class=“text-xl md:text-3xl lg:text-5xl mb-2 md:mb-4”>
Responsive Heading
</h1>
