Text decoration and underline in Tailwind - Mini Project: Build & Apply

Text Decoration and Underline with Tailwind CSS

📖 Scenario: You are creating a simple webpage section that highlights important text using underlines and other text decorations. This is common in websites to emphasize links or key phrases.

🎯 Goal: Build a small HTML snippet styled with Tailwind CSS that shows a heading and a paragraph. The heading should have an underline, and the paragraph should have a line-through decoration. This will help you learn how to use Tailwind's text decoration utilities.

📋 What You'll Learn

Use Tailwind CSS classes to add text decorations

Underline the heading text using Tailwind

Add a line-through decoration to the paragraph text

Use semantic HTML elements:

for heading and

for paragraph

Ensure the code is valid HTML5 and uses Tailwind classes correctly

💡 Why This Matters

🌍 Real World

Websites often use text decorations to highlight links, warnings, or important information. Learning to apply these styles with Tailwind CSS helps create visually clear and accessible content.

💼 Career

Front-end developers frequently style text for readability and emphasis. Knowing Tailwind CSS text decoration utilities is valuable for quickly building consistent and responsive UI designs.

1

Create the HTML structure with a header and paragraph

Write the HTML code to create a <header> element containing an <h1> with the text Important Notice. Below it, add a <p> element with the text This text needs decoration.

Tailwind

Need a hint?

Use semantic tags: <header>, <h1>, and <p> with the exact text given.

2

Add Tailwind class for underline on the heading

Add the Tailwind CSS class underline to the <h1> element inside the <header> to underline the heading text.

Tailwind

  Important Notice 
  This text needs decoration

Need a hint?

Use the Tailwind class underline inside the class attribute of the <h1> tag.

3

Add Tailwind class for line-through on the paragraph

Add the Tailwind CSS class line-through to the <p> element inside the <header> to add a line-through decoration to the paragraph text.

Tailwind

  Important Notice
  This text needs decoration 

Need a hint?

Use the Tailwind class line-through inside the class attribute of the <p> tag.

4

Add responsive text color to the paragraph

Add the Tailwind CSS class md:text-red-600 to the <p> element so that on medium and larger screens the paragraph text color changes to red.

Tailwind

  Important Notice
  This text needs decoration 

Need a hint?

Use the responsive prefix md: with the text color class text-red-600 inside the class attribute of the <p> tag.