Breakpoint prefixes (sm, md, lg, xl, 2xl) in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the sm: prefix in Tailwind CSS do?

The sm: prefix applies styles starting from the small screen size breakpoint (640px and up). It means the style will only work on screens that are at least 640 pixels wide.

beginner

List the Tailwind CSS breakpoint prefixes in order from smallest to largest.

The order is: sm (≥640px), md (≥768px), lg (≥1024px), xl (≥1280px), and 2xl (≥1536px).

beginner

How would you apply a background color only on medium screens and larger using Tailwind?

Use the md: prefix before the background color class. For example, md:bg-blue-500 applies the blue background only on screens 768px wide or larger.

beginner

True or False: Tailwind breakpoint prefixes apply styles only below the specified screen width.

False. Tailwind breakpoint prefixes apply styles starting from the specified screen width and up (mobile-first). For example, lg: applies styles on large screens and larger, not smaller.

beginner

Why is using breakpoint prefixes important in responsive design?

Breakpoint prefixes let you change styles based on screen size. This helps your website look good and work well on phones, tablets, and desktops by adjusting layout and appearance for each device.

What screen width does the md: prefix target in Tailwind CSS?

A 768px and above

B 640px and above

C 1024px and above

D 1280px and above

The md: prefix applies styles starting at 768 pixels wide and larger.

Which prefix applies styles on the largest screens in Tailwind?

A lg:

B 2xl:

C xl:

D sm:

The 2xl: prefix targets screens 1536px wide and larger, the largest breakpoint.

If you want a style to apply only on small screens and larger, which prefix do you use?

A xl:

B md:

C lg:

D sm:

The sm: prefix applies styles starting at 640px wide, so it affects small screens and up.

What happens if you use a class without any breakpoint prefix?

A It applies only on large screens

B It applies only on small screens

C It applies on all screen sizes

D It applies only on medium screens

Classes without prefixes apply to all screen sizes by default.

Which breakpoint prefix would you use to apply styles starting at 1024px wide?

A lg:

B md:

C sm:

D xl:

The lg: prefix applies styles starting at 1024px wide.

Explain how Tailwind CSS breakpoint prefixes help create responsive designs.

Think about how websites change on phones vs desktops.

List all Tailwind breakpoint prefixes and their minimum screen widths.

Start from smallest to largest.