Text alignment in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to align the text to the center using Tailwind CSS.

Tailwind

<p class="text-[1]">This text is centered.</p>

Drag options to blanks, or click blank then click option'

Aleft

Bcenter

Cjustify

Dright

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-left or text-right instead of text-center.

Forgetting the text- prefix.

The class text-center aligns text to the center horizontally.

2fill in blank

medium

Complete the code to align the text to the right using Tailwind CSS.

Tailwind

<div class="[1]">Right aligned text here.</div>

Drag options to blanks, or click blank then click option'

Atext-right

Btext-center

Ctext-left

Dtext-justify

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-center when right alignment is needed.

Using text-justify which spreads text evenly.

The class text-right aligns text to the right side.

3fill in blank

hard

Fix the error in the code to justify the paragraph text using Tailwind CSS.

Tailwind

<p class="text-[1]">This paragraph is justified.</p>

Drag options to blanks, or click blank then click option'

Acenter

Bright

Cjustify

Dleft

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-center or text-right instead of text-justify.

Omitting the text- prefix.

The class text-justify makes the text spread evenly across the line width.

4fill in blank

hard

Fill both blanks to create a heading with left-aligned text and bold font using Tailwind CSS.

Tailwind

<h1 class="[1] [2]">Welcome to the site!</h1>

Drag options to blanks, or click blank then click option'

Atext-left

Btext-center

Cfont-bold

Dfont-light

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-center instead of text-left.

Using font-light instead of font-bold.

The class text-left aligns text to the left, and font-bold makes the text bold.

5fill in blank

hard

Fill all three blanks to create a paragraph with right-aligned, italic, and gray text using Tailwind CSS.

Tailwind

<p class="[1] [2] [3]">This is a styled paragraph.</p>

Drag options to blanks, or click blank then click option'

Atext-right

Bitalic

Ctext-gray-500

Dfont-bold

Attempts:

3 left

💡 Hint

Common Mistakes

Using font-bold instead of italic.

Using text-left instead of text-right.

text-right aligns text to the right, italic makes text italic, and text-gray-500 colors the text gray.