Tailwindmarkup~15 mins

Text transform (uppercase, lowercase) in Tailwind - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Text Transform with Tailwind CSS

📖 Scenario: You are creating a simple webpage to display three different text styles: normal, uppercase, and lowercase. This helps users see how text can change appearance using Tailwind CSS classes.

🎯 Goal: Build a webpage with three paragraphs. The first paragraph shows normal text, the second paragraph shows the same text in uppercase, and the third paragraph shows the same text in lowercase. Use Tailwind CSS classes for text transformation.

📋 What You'll Learn

Create an HTML skeleton with lang, charset, and viewport meta tags

Add three paragraphs with the text: 'Hello Tailwind CSS!'

Apply no text transform class to the first paragraph (normal text)

Apply the Tailwind class uppercase to the second paragraph

Apply the Tailwind class lowercase to the third paragraph

Use semantic HTML and ensure accessibility

💡 Why This Matters

🌍 Real World

Text transformation is common in web design to emphasize or style text content clearly and accessibly.

💼 Career

Knowing how to use Tailwind CSS for text styling is useful for frontend developers to quickly build visually consistent and accessible interfaces.

Progress0 / 4 steps

Create the HTML skeleton with three paragraphs

Create an HTML file with lang="en", charset="UTF-8", and viewport meta tags inside the <head>. Inside the <body>, add three <p> elements each containing the text Hello Tailwind CSS!.

Tailwind




  
  
  Text Transform Example


  Hello Tailwind CSS!
  Hello Tailwind CSS!
  Hello Tailwind CSS!

Need a hint?

Remember to add the lang attribute to the <html> tag and include the required meta tags inside <head>.

Add Tailwind CSS link to the head

Add the Tailwind CSS CDN link inside the <head> section to enable Tailwind styles on the page. Use the official Tailwind CDN link: <link href="https://cdn.tailwindcss.com" rel="stylesheet">.

Tailwind




  
  
  Text Transform Example
  


  Hello Tailwind CSS!
  Hello Tailwind CSS!
  Hello Tailwind CSS!

Need a hint?

Use the <link> tag with the href set to https://cdn.tailwindcss.com inside the <head>.

Apply uppercase and lowercase Tailwind classes

Add the Tailwind class uppercase to the second <p> element and the class lowercase to the third <p> element. Leave the first paragraph without any text transform class.

Tailwind




  
  
  Text Transform Example
  


  Hello Tailwind CSS!
  Hello Tailwind CSS! 
  Hello Tailwind CSS!

Need a hint?

Use the Tailwind classes uppercase and lowercase inside the class attribute of the second and third paragraphs respectively.

Add accessible labels and spacing

Add an aria-label attribute to each paragraph describing the text transform style: 'Normal text', 'Uppercase text', and 'Lowercase text'. Also, add the Tailwind class mb-4 to each paragraph to add spacing below them.

Tailwind




  
  
  Text Transform Example
  


  Hello Tailwind CSS! 
  Hello Tailwind CSS! 
  Hello Tailwind CSS!

Need a hint?

Use aria-label attributes to describe each paragraph for screen readers. Add the Tailwind class mb-4 to add margin below each paragraph.