Text alignment in Tailwind - Mini Project: Build & Apply

Text Alignment with Tailwind CSS

📖 Scenario: You are creating a simple webpage section that shows three paragraphs. Each paragraph should have different text alignment to demonstrate how text alignment works in Tailwind CSS.

🎯 Goal: Build a webpage with three paragraphs inside a <section>. The first paragraph's text should be aligned to the left, the second paragraph's text should be centered, and the third paragraph's text should be aligned to the right using Tailwind CSS classes.

📋 What You'll Learn

Use semantic HTML5 elements

Use Tailwind CSS classes for text alignment

Make sure the text alignment is visually distinct for each paragraph

Include a <section> container for the paragraphs

💡 Why This Matters

🌍 Real World

Text alignment is a common need in webpages to improve readability and design. Using Tailwind CSS classes makes it quick and consistent.

💼 Career

Front-end developers often use utility-first CSS frameworks like Tailwind to style text alignment efficiently without writing custom CSS.

1

Create the HTML structure with a section and three paragraphs

Write the HTML code to create a <section> element containing three <p> elements. Each paragraph should have the exact text: Left aligned text, Center aligned text, and Right aligned text respectively.

Tailwind

Need a hint?

Use a <section> tag to group the paragraphs. Write three <p> tags inside it with the exact texts given.

2

Add Tailwind CSS classes for left text alignment on the first paragraph

Add the Tailwind CSS class text-left to the first <p> element inside the <section> to align its text to the left.

Tailwind

  Left aligned text 
  Center aligned text
  Right aligned text

Need a hint?

Add class="text-left" inside the first paragraph tag.

3

Add Tailwind CSS classes for center text alignment on the second paragraph

Add the Tailwind CSS class text-center to the second <p> element inside the <section> to center its text.

Tailwind

  Left aligned text
  Center aligned text 
  Right aligned text

Need a hint?

Add class="text-center" inside the second paragraph tag.

4

Add Tailwind CSS classes for right text alignment on the third paragraph

Add the Tailwind CSS class text-right to the third <p> element inside the <section> to align its text to the right.

Tailwind

  Left aligned text
  Center aligned text
  Right aligned text 

Need a hint?

Add class="text-right" inside the third paragraph tag.