Responsive utility overrides in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does 'responsive utility overrides' mean in Tailwind CSS?

It means using different utility classes for different screen sizes to change styles as the screen size changes.

beginner

How do you write a Tailwind class that applies padding only on medium screens and larger?

Use the prefix md: before the utility, like md:p-4.

beginner

Why is it useful to override utilities responsively?

It helps make your website look good on phones, tablets, and desktops by adjusting styles for each size.

intermediate

What is the order of applying Tailwind responsive utilities if multiple sizes are used?

Styles for smaller screens apply first, then larger screen styles override them as screen size grows.

beginner

Give an example of overriding text color for small and large screens using Tailwind.

Use text-red-500 for default small screens and lg:text-blue-500 to change color on large screens.

Which Tailwind prefix applies styles only on screens medium and larger?

A md:

B sm:

C lg:

D xl:

The prefix md: targets medium screens and larger.

If you want to change margin on large screens only, which prefix do you use?

A sm:

B lg:

C xl:

D md:

The lg: prefix applies styles on large screens and bigger.

What happens if you write p-2 md:p-4 in Tailwind?

A Padding is 4 on all screens

B Padding is 2 on medium screens only

C Padding is 2 on small screens, 4 on medium and larger

D Padding is 4 on small screens only

The base padding is 2, overridden by 4 on medium and larger screens.

Which screen size is smallest in Tailwind's default breakpoints?

A sm

B md

C lg

D xl

The sm breakpoint is the smallest defined screen size in Tailwind.

How do responsive overrides help accessibility?

A By changing colors randomly

B By hiding content on small screens

C By disabling keyboard navigation

D By adjusting layout for easier reading on different devices

Responsive overrides adjust layout and styles to improve readability and usability on all devices.

Explain how to use Tailwind responsive prefixes to change a button's background color on different screen sizes.

Think about using <code>sm:</code>, <code>md:</code>, or <code>lg:</code> before the background color class.

Describe why responsive utility overrides are important for building websites that work well on phones and desktops.

Consider how different screen sizes need different spacing or font sizes.