Introduction

Introduction to Tailwind CSS

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework used to design modern webpages quickly.

Instead of writing separate CSS code, Tailwind provides ready-made utility classes that can be directly used inside HTML elements.

Tailwind helps developers:

build UI faster
create responsive layouts
maintain consistent design

Why Tailwind CSS?

Traditional CSS requires writing separate styles.

Example: CSS

.button {
  background-color: blue;
  color: white;
}

In Tailwind CSS, the same styling can be written directly inside HTML:

<button class="bg-blue-500 text-white">
  Click Me
</button>

This reduces the need for writing custom CSS repeatedly.

Using Tailwind CSS with CDN

For beginners, Tailwind can be used directly using CDN.

<script src="https://cdn.tailwindcss.com"></script>

This loads Tailwind CSS without installation.

Example Program

<!DOCTYPE html>
<html>
<head>
  <title>Tailwind Introduction</title>

  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100 p-6">

  <h1 class="text-3xl font-bold text-blue-600 mb-4">
    Welcome to Tailwind CSS
  </h1>

  <p class="text-gray-700 mb-4">
    Tailwind CSS helps build modern user interfaces quickly.
  </p>

  <button class="bg-blue-500 text-white px-4 py-2 rounded-lg">
    Click Me
  </button>

</body>
</html>

Explanation of Program

Tailwind CDN

<script src="https://cdn.tailwindcss.com"></script>

Loads Tailwind CSS into the project.

Without this line, Tailwind classes will not work.

Body Styling

<body class="bg-gray-100 p-6">

bg-gray-100

Gives light gray background color.

p-6

Adds padding around the page content.

Heading

<h1 class="text-3xl font-bold text-blue-600 mb-4">

text-3xl

Makes text large.

font-bold

Makes text bold.

text-blue-600

Changes text color to blue.

mb-4

Adds margin below the heading.

Paragraph

<p class="text-gray-700 mb-4">

text-gray-700

Changes paragraph text color.

mb-4

Adds spacing below the paragraph.

Button

<button class="bg-blue-500 text-white px-4 py-2 rounded-lg">

bg-blue-500

Blue button background.

text-white

White text color.

px-4

Horizontal padding.

py-2

Vertical padding.

rounded-lg

Rounded button corners.

Important Utility Classes

Class	Meaning
bg-blue-500	Blue background
text-white	White text
text-3xl	Large text
font-bold	Bold text
p-6	Padding
mb-4	Margin bottom
rounded-lg	Rounded corners

Advantages of Tailwind CSS

Faster UI development
Reusable utility classes
Easy responsive design
Modern styling system
Less custom CSS

Summary

In this topic, we learned the basic introduction to Tailwind CSS and understood how it helps build modern webpages using utility classes. We explored the difference between traditional CSS and Tailwind CSS, learned how to use Tailwind through CDN, and created simple UI elements like buttons and cards using predefined classes. Tailwind CSS makes frontend development faster, cleaner, and easier by allowing styles to be applied directly inside HTML elements.

Keywords

Tailwind CSS, Utility-First CSS, CDN, Frontend Development, Utility Classes, Responsive Design, Modern UI, CSS Framework, Buttons, Cards, Web Design, HTML Styling, Tailwind Classes, UI Development, Beginner Tailwind Tutorial.