Text alignment in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual alignment of this text?

Given the following HTML snippet styled with Tailwind CSS, how will the text inside the

tag be aligned when viewed in a browser?

Tailwind

<div class="w-64 border border-gray-400">
  <p class="text-right">Hello, world!</p>
</div>

A The text will be centered horizontally in the container.

B The text will be justified, spreading across the container width.

C The text will be aligned to the left side of the container.

D The text will be aligned to the right side of the container.

💡 Hint

Look at the Tailwind class that controls horizontal text alignment.

The class text-right in Tailwind CSS aligns text to the right side of its container.

❓ selector

intermediate

Which Tailwind class centers text horizontally?

You want to center text horizontally inside a div using Tailwind CSS. Which class should you use?

A text-left

B text-center

C text-justify

D text-right

💡 Hint

Think about the class name that suggests centering text.

The text-center class centers text horizontally in Tailwind CSS.

🧠 Conceptual

advanced

What happens if you combine text-left and text-center classes?

Consider this HTML snippet:

<p class="text-left text-center">Sample Text</p>

How will the text be aligned in the browser?

Tailwind

<p class="text-left text-center">Sample Text</p>

A The text will be aligned to the left because it is the first class.

B The text alignment will be unpredictable and vary by browser.

C The text will be centered because the last class overrides the previous one.

D The text will be justified because conflicting classes cause fallback.

💡 Hint

In CSS, later classes override earlier ones if they affect the same property.

When multiple classes affect the same CSS property, the last one in the class attribute usually takes precedence. Here, text-center overrides text-left.

❓ accessibility

advanced

Which text alignment is best for accessibility and readability?

For long paragraphs of text on a website, which alignment choice is generally considered best for readability and accessibility?

A Left-aligned text

B Right-aligned text

C Centered text

D Justified text

💡 Hint

Think about how easy it is to follow lines of text.

Left-aligned text creates a consistent starting point for each line, making it easier to read and follow, especially for languages read left to right.

📝 Syntax

expert

What error occurs with this Tailwind class usage?

Examine this HTML snippet:

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

What will happen when this code is rendered in a browser?

Tailwind

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

A The text will be left-aligned because the class is invalid and ignored.

B The text will be right-aligned by default.

C The browser will show a syntax error and not render the text.

D The text will be centered horizontally.

💡 Hint

Check the spelling of the Tailwind class.

The class text-centre is misspelled. Tailwind does not recognize it, so the browser ignores it and uses the default alignment, which is left-aligned.

Practice

1. Which Tailwind CSS class aligns text to the center inside a container?

easy

A. text-justify

B. text-left

C. text-center

D. text-right

Solution

1. Step 1: Understand text alignment classes

   Tailwind provides text-left, text-center, text-right, and text-justify to align text horizontally.

2. Step 2: Identify the class for center alignment

   The class text-center aligns text horizontally in the center of its container.

3. Final Answer:

   text-center -> Option C

4. Quick Check:

   Center aligned text = text-center [OK]

Hint: Center text with text-center class [OK]

Common Mistakes:

• Confusing text-right with center alignment
• Using text-justify for center alignment
• Forgetting to add any alignment class

2. Which of these is the correct Tailwind class to align text to the right?

easy

A. text-right

B. text-center

C. text-left

D. text-align-right

Solution

1. Step 1: Recall Tailwind text alignment classes

   Tailwind uses text-left, text-center, text-right, and text-justify for horizontal text alignment.

2. Step 2: Identify the correct class for right alignment

   The correct class to align text to the right is text-right. The option text-align-right is not a valid Tailwind class.

3. Final Answer:

   text-right -> Option A

4. Quick Check:

   Right aligned text = text-right [OK]

Hint: Right align text with text-right class [OK]

Common Mistakes:

• Using text-align-right instead of text-right
• Mixing up text-left and text-right
• Forgetting the text- prefix

3. What will be the horizontal alignment of the text inside this div?

<div class="text-justify">This is a sample paragraph.</div>

medium

A. Text aligned to the center

B. Text aligned to the right

C. Text aligned to the left

D. Text stretched to fill the container width with even edges

Solution

1. Step 1: Understand the text-justify class effect

   The text-justify class makes text spread so both left and right edges align evenly, creating a block of text with straight edges on both sides.

2. Step 2: Identify the visual result

   Text inside the div will be stretched to fill the container width with even edges on left and right, not just aligned left, right, or center.

3. Final Answer:

   Text stretched to fill the container width with even edges -> Option D

4. Quick Check:

   Justified text = text-justify [OK]

Hint: Justify text with text-justify for even edges [OK]

Common Mistakes:

• Confusing justify with center alignment
• Expecting text-justify to align left only
• Ignoring the effect of text-justify on spacing

4. You want text inside a paragraph to be aligned left on small screens and center on medium screens and above. Which Tailwind classes fix this code?

<p class="text-center sm:text-left">Hello World</p>

medium

A. Replace with text-left sm:text-center

B. Replace with text-left md:text-center

C. Replace with text-center md:text-left

D. Replace with text-center sm:text-left (no change needed)

Solution

1. Step 1: Understand responsive prefixes in Tailwind

   Classes without prefix apply to all screen sizes. Prefixes like sm:, md: apply from that screen size and up.

2. Step 2: Analyze the requirement and current code

   We want left alignment on small screens and center on medium and larger. The current code aligns center by default and left on small screens, which is opposite.

3. Step 3: Correct the classes

   Use text-left for default (small screens) and md:text-center for medium and above to get the desired effect.

4. Final Answer:

   Replace with text-left md:text-center -> Option B

5. Quick Check:

   Default left + md center = text-left md:text-center [OK]

Hint: Default class applies to all, use md: for medium screens [OK]

Common Mistakes:

• Mixing sm: and md: prefixes incorrectly
• Not setting default alignment properly
• Assuming sm: applies only to small screens, not up

5. You want a paragraph's text to be left aligned on mobile, center aligned on tablets, and right aligned on desktops using Tailwind. Which class combination achieves this?

hard

A. text-left md:text-center lg:text-right

B. text-center sm:text-left lg:text-right

C. text-right md:text-center sm:text-left

D. text-left sm:text-center md:text-right

Solution

1. Step 1: Understand Tailwind responsive prefixes

   Classes without prefix apply to all screen sizes (mobile by default). md: applies from medium screens (tablets) and up, lg: applies from large screens (desktops) and up.

2. Step 2: Match alignment to screen sizes

   We want left alignment on mobile (default), center on tablets (md), and right on desktops (lg). So the classes should be text-left, md:text-center, and lg:text-right.

3. Final Answer:

   text-left md:text-center lg:text-right -> Option A

4. Quick Check:

   Mobile left, tablet center, desktop right = text-left md:text-center lg:text-right [OK]

Hint: Use no prefix for mobile, md: for tablets, lg: for desktops [OK]

Common Mistakes:

• Using sm: instead of md: for tablets
• Wrong order of prefixes causing override issues
• Confusing screen size breakpoints