Font size and scaling in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What unit does Tailwind CSS use by default for font sizes?

Tailwind CSS uses rem units by default for font sizes. This means font sizes scale relative to the root font size, helping with accessibility and responsiveness.

beginner

How do you apply a large font size in Tailwind CSS?

You add a class like <code>text-lg</code> or <code>text-xl</code> to your HTML element. For example, <code>&lt;p class="text-xl"&gt;Hello&lt;/p&gt;</code> makes the text larger.

intermediate

What is the benefit of using rem units for font size scaling?

Using rem units means font sizes scale based on the user's browser settings. This helps users who need larger text for readability and keeps your design flexible.

intermediate

How can you make font sizes responsive in Tailwind CSS?

Use responsive prefixes like sm:text-base, md:text-lg, lg:text-xl. This changes font size based on screen width, making text easier to read on all devices.

beginner

What does the class text-2xl do in Tailwind CSS?

It sets the font size to a predefined larger size, usually around 1.5rem (24px). This makes text stand out more, like for headings or important content.

Which Tailwind class sets the font size to extra large?

A text-xl

B text-sm

C text-base

D text-xs

text-xl sets the font size to extra large. The others are smaller sizes.

What unit does Tailwind use for font sizes by default?

A %

B em

C px

D rem

Tailwind uses rem units by default for font sizes, which scale relative to the root font size.

How do you make font size change on medium screens in Tailwind?

A md:text-lg

B text-md

C medium:text-lg

D text-md:md

md:text-lg applies the text-lg font size on medium screens and larger.

Why is using rem units good for accessibility?

A They fix font size to pixels

B They make fonts bold

C They scale with user settings

D They only work on desktop

rem units scale with the user's browser settings, helping users who need larger text.

Which class makes text smaller in Tailwind?

A text-lg

B text-sm

C text-xl

D text-2xl

text-sm makes the font size smaller than the base size.

Explain how Tailwind CSS uses font size classes and why rem units help with scaling.

Think about how font size changes on different devices and user preferences.

Describe how to make text size responsive in Tailwind CSS and why it matters.

Consider how text looks on small vs large screens.