0
0
Tailwindmarkup~5 mins

Breakpoint prefixes (sm, md, lg, xl, 2xl) in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Breakpoint prefixes help you make your website look good on different screen sizes. They let you change styles depending on the device width.

You want your menu to be vertical on small phones but horizontal on tablets and bigger screens.
You want text to be smaller on phones and bigger on desktops.
You want to hide some images on small screens to save space.
You want buttons to be bigger on large screens for easier clicking.
You want to change layout from one column on mobile to multiple columns on desktop.
Syntax
Tailwind
prefix:utility

// Example:
md:text-center

// This means apply 'text-center' style only on medium screens and larger.

Breakpoint prefixes are added before the utility class, separated by a colon.

They apply styles starting from that screen size and up (mobile-first).

Examples
Background color changes from red on small screens, green on medium, and blue on large screens.
Tailwind
sm:bg-red-500
md:bg-green-500
lg:bg-blue-500
Text size is small by default, large on medium screens, and extra large on extra large screens.
Tailwind
text-sm md:text-lg xl:text-xl
Element is hidden on small screens and shown as block on medium and larger screens.
Tailwind
hidden md:block
Sample Program

This page shows a heading and paragraph. Their text size and color change at different screen widths using breakpoint prefixes.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Breakpoint Prefixes Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl 2xl:text-4xl font-bold">
    Responsive Heading
  </h1>
  <p class="mt-4 text-gray-700 sm:text-red-500 md:text-green-500 lg:text-blue-500">
    Watch my color and size change as you resize the browser window.
  </p>
</body>
</html>
OutputSuccess
Important Notes

Breakpoint prefixes follow a mobile-first approach: styles apply from the prefix size and up.

Common breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px).

You can combine multiple breakpoint prefixes to create complex responsive designs.

Summary

Breakpoint prefixes let you apply styles based on screen size.

They help make your website look good on phones, tablets, and desktops.

Use them by adding prefix: before utility classes, like md:text-center.