Mobile-first philosophy in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the term mobile-first philosophy mean in web development?

It means designing and building websites starting with the smallest screen (mobile devices) first, then scaling up to larger screens like tablets and desktops.

beginner

Why is mobile-first design important?

Because most people use mobile devices to browse the web, so starting with mobile ensures the site works well on small screens and loads fast.

intermediate

How does Tailwind CSS support mobile-first philosophy?

Tailwind applies styles to mobile by default and uses prefixes like sm:, md: for larger screens, making it easy to add styles as screen size grows.

intermediate

What is the difference between mobile-first and desktop-first CSS?

Mobile-first CSS starts with styles for small screens and adds bigger screen styles with media queries. Desktop-first starts with big screens and adds smaller screen styles, which can be harder to maintain.

beginner

Give an example of a Tailwind class that applies only on medium screens and up.

The class md:text-lg changes the text size to large only on medium screens (768px) and larger.

What is the first step in mobile-first web design?

A Ignore screen sizes

B Design for desktop screens first

C Design for small screens first

D Design only for tablets

Mobile-first means starting with small screens like phones before scaling up.

In Tailwind CSS, which prefix applies styles starting at the small screen breakpoint?

A sm:

B md:

C lg:

D xl:

The sm: prefix applies styles at the small screen breakpoint (640px) and above.

Why is mobile-first design better for performance?

A Because it loads styles for small screens first, reducing unnecessary code

B Because it ignores mobile users

C Because it uses only desktop styles

D Because it disables images on mobile

Mobile-first loads only needed styles for small screens first, improving speed.

Which Tailwind class applies a style only on large screens and bigger?

A md:bg-blue-500

B sm:bg-blue-500

C bg-blue-500

D lg:bg-blue-500

The lg: prefix applies styles starting at large screens (1024px) and up.

What is a key benefit of designing mobile-first?

A Ignoring desktop users

B Better user experience on small devices

C Making sites only for phones

D Using fixed widths

Mobile-first ensures the site works well and is easy to use on small devices.

Explain the mobile-first philosophy and how Tailwind CSS helps implement it.

Think about how styles grow from small to large screens.

Describe why mobile-first design improves website performance and user experience.

Consider the common device people use to browse the web.