0
0
Tailwindmarkup~5 mins

First Tailwind component (Hello World)

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Tailwind helps you style your web pages quickly using ready-made classes. This example shows how to create a simple component that says "Hello World" with nice styles.

You want to create a simple styled message on your webpage.
You are learning how to use Tailwind CSS classes for the first time.
You want to see how Tailwind changes the look of text and layout easily.
Syntax
Tailwind
<div class="text-center text-blue-600 font-bold text-2xl">Hello World</div>

Use class attribute to add Tailwind classes.

Classes like text-center and text-blue-600 control alignment and color.

Examples
This example uses red text, semi-bold font, and a smaller size.
Tailwind
<div class="text-center text-red-500 font-semibold text-xl">Hello World</div>
This example aligns text to the left, makes it green, italic, and bigger.
Tailwind
<div class="text-left text-green-700 italic text-3xl">Hello World</div>
Sample Program

This is a complete HTML page using Tailwind CSS from a CDN. The body uses flexbox to center the message both vertically and horizontally. The message is styled with blue color, bold font, and larger text size. It also includes accessibility with role and aria-label.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>First Tailwind Component</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
  <div class="text-center text-blue-600 font-bold text-2xl" role="main" aria-label="Greeting message">
    Hello World
  </div>
</body>
</html>
OutputSuccess
Important Notes

Tailwind classes are mobile-first and responsive by default.

Use semantic HTML and accessibility attributes for better user experience.

You can try changing the color or size by editing the class names and refreshing the browser.

Summary

Tailwind uses simple class names to style elements quickly.

Adding classes like text-center and text-blue-600 changes alignment and color.

Using Tailwind CDN lets you try styles without setup.