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.

Practice

1. Which Tailwind class sets the font size to extra small?

easy

A. text-xs

B. text-lg

C. text-3xl

D. text-base

Solution

1. Step 1: Understand Tailwind font size naming

   Tailwind uses text-xs for extra small font size.

2. Step 2: Match the class to the size

   Among the options, only text-xs means extra small.

3. Final Answer:

   text-xs -> Option A

4. Quick Check:

   Extra small font = text-xs [OK]

Hint: Extra small font always uses text-xs in Tailwind [OK]

Common Mistakes:

• Confusing text-xs with text-base or text-lg
• Thinking text-3xl is small instead of large
• Assuming text-base is the smallest size

2. Which of these is the correct Tailwind class to make text very large, close to the largest size?

easy

A. text-2xl

B. text-sm

C. text-9xl

D. text-base

Solution

1. Step 1: Recall Tailwind font size scale

   Tailwind font sizes go up to text-9xl for very large text.

2. Step 2: Identify the largest size option

   Among the options, text-9xl is the largest size available.

3. Final Answer:

   text-9xl -> Option C

4. Quick Check:

   Largest font size = text-9xl [OK]

Hint: Largest font size in Tailwind is text-9xl [OK]

Common Mistakes:

• Choosing text-2xl thinking it's the largest
• Confusing text-sm as large
• Using text-base which is default size

3. What font size will the following HTML render with Tailwind?

<p class="text-lg">Hello</p>

medium

A. Large font size

B. Small font size

C. Medium font size

D. Extra large font size

Solution

1. Step 1: Understand the class text-lg

   The class text-lg in Tailwind means large font size, bigger than base.

2. Step 2: Match the size description

   Among the options, "Large font size" best matches text-lg.

3. Final Answer:

   Large font size -> Option A

4. Quick Check:

   text-lg = Large font size [OK]

Hint: text-lg means large font size in Tailwind [OK]

Common Mistakes:

• Thinking text-lg is medium or small
• Confusing text-lg with text-xl or text-base
• Ignoring the class and guessing default size

4. You want to make text smaller on mobile but larger on desktop using Tailwind. Which class combination is correct?

<p class="?">Responsive Text</p>

medium

A. text-lg sm:text-sm

B. text-sm md:text-lg

C. text-base lg:text-xs

D. text-xl md:text-xs

Solution

1. Step 1: Understand Tailwind responsive prefixes

   Tailwind uses prefixes like md: to apply styles on medium screens and up.

2. Step 2: Choose smaller text by default and larger on medium screens

   text-sm md:text-lg means small text on mobile and large text on medium+ screens.

3. Final Answer:

   text-sm md:text-lg -> Option B

4. Quick Check:

   Mobile small, desktop large = text-sm md:text-lg [OK]

Hint: Use mobile first: small text, then md: larger text [OK]

Common Mistakes:

• Reversing sizes for mobile and desktop
• Using wrong breakpoint prefixes
• Not using responsive prefixes at all

5. You want a heading that scales smoothly from small on mobile to very large on desktop using Tailwind. Which class set achieves this best?

<h1 class="?">Scaling Heading</h1>

hard

A. text-3xl md:text-5xl lg:text-6xl

B. text-lg sm:text-xl md:text-2xl

C. text-xs sm:text-base md:text-lg

D. text-sm md:text-4xl lg:text-7xl

Solution

1. Step 1: Identify scaling from small to very large

   We want text starting small on mobile, then bigger on medium, and very large on large screens.

2. Step 2: Check each option's size progression

   text-sm md:text-4xl lg:text-7xl scales from text-sm (small), to text-4xl (large), to text-7xl (very large), matching the requirement.

3. Final Answer:

   text-sm md:text-4xl lg:text-7xl -> Option D

4. Quick Check:

   Small to very large scaling = text-sm md:text-4xl lg:text-7xl [OK]

Hint: Use increasing sizes with responsive prefixes for smooth scaling [OK]

Common Mistakes:

• Choosing options with small max sizes
• Not increasing size enough on larger screens
• Using sizes that start too large on mobile