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.