Tailwindmarkup~15 mins

First Tailwind component (Hello World) - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

First Tailwind component (Hello World)

📖 Scenario: You want to create a simple web page that shows a friendly greeting using Tailwind CSS for styling. This will help you learn how to set up a basic Tailwind component and see how it looks in the browser.

🎯 Goal: Build a small web page with a centered <h1> heading that says Hello, World! styled using Tailwind CSS classes for color, font size, and spacing.

📋 What You'll Learn

Use a semantic <main> container

Add an <h1> heading with the exact text Hello, World!

Center the heading horizontally and vertically on the page

Use Tailwind CSS classes for styling: text color, font size, and margin

Include the Tailwind CSS CDN link in the <head>

💡 Why This Matters

🌍 Real World

Creating simple, styled components quickly is common when building websites or prototypes. Tailwind CSS helps you do this without writing custom CSS.

💼 Career

Knowing how to use Tailwind CSS is valuable for frontend web development jobs where rapid styling and responsive design are needed.

Progress0 / 4 steps

Create the basic HTML structure

Write the basic HTML5 skeleton with lang="en", charset="UTF-8", and a viewport meta tag inside the <head>. Add an empty <main> element inside the <body>.

Tailwind




  
  
  Hello Tailwind

Need a hint?

Start with a standard HTML5 page structure. Make sure to include lang="en" in the <html> tag and the viewport meta tag for responsive design.

Add Tailwind CSS CDN link

Inside the <head>, add the official Tailwind CSS CDN link: <script src="https://cdn.tailwindcss.com"></script> to enable Tailwind styling.

Tailwind




  
  
  Hello Tailwind

Need a hint?

Use the official Tailwind CDN script tag exactly as shown to load Tailwind CSS quickly without setup.

Add the heading with Tailwind classes

Inside the <main>, add an <h1> element with the exact text Hello, World!. Add Tailwind classes text-4xl for large font size, text-blue-600 for blue color, and m-4 for margin.

Tailwind




  
  
  Hello Tailwind

Need a hint?

Use the exact text and Tailwind classes in the <h1> tag to style the heading.

Center the heading horizontally and vertically

Add Tailwind classes flex, items-center, justify-center, and min-h-screen to the <main> element to center the <h1> horizontally and vertically on the full screen height.

Tailwind




  
  
  Hello Tailwind
  


  
    Hello, World!

Need a hint?

Use Tailwind's flexbox utilities on the <main> to center content both ways and fill the screen height.