Tailwind CSS Introduction
Tailwind CSS is a utility-first CSS framework for building designs directly in your HTML.
What is Tailwind CSS?
- Tailwind is a CSS framework, a big set of ready-made CSS
- It is utility-first: each class does one small thing, like
text-centerorfont-bold - You build a design by putting many small classes on an element
- It does not give you finished components like "card" or "navbar"; you make them from utilities
Normal CSS vs Tailwind
With normal CSS, you invent a class name, then write its styles in a CSS file:
Example
html
<style>
.price-tag {
background-color: #ecfeff;
color: #0e7490;
padding: 8px 16px;
border-radius: 8px;
font-weight: bold;
}
</style>
<span class="price-tag">Rs 1,499</span>With Tailwind, the same design is written only with classes:
Example
html
<span class="bg-cyan-50 text-cyan-700 px-4 py-2 rounded-lg font-bold">Rs 1,499</span>Each class matches one CSS declaration:
| Class | CSS it adds |
|---|---|
bg-cyan-50 | A very light cyan background |
text-cyan-700 | Dark cyan text |
px-4 | Padding left and right of 1rem (16px) |
py-2 | Padding top and bottom of 0.5rem (8px) |
rounded-lg | Rounded corners |
font-bold | font-weight: 700 |
Your First Tailwind Page
Example
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-slate-100 p-8">
<div class="max-w-sm mx-auto bg-white rounded-xl shadow-md p-6">
<h2 class="text-xl font-bold text-slate-800">Ayesha's Tailoring</h2>
<p class="text-slate-500 mt-2">Ladies' suits stitched in 3 days, North Karachi.</p>
<span class="inline-block mt-4 bg-cyan-50 text-cyan-700 px-4 py-2 rounded-lg font-bold">From Rs 1,499</span>
</div>
</body>
</html>We did not write a single line of CSS, yet the card has spacing, colours, rounded corners and a shadow.
Why Developers Like It
- Fast: you style while you write HTML, without inventing class names
- Consistent: sizes and colours come from a fixed scale, so the design stays neat
- Small files: in a real project, Tailwind only puts the classes you used into the final CSS
- Easy changes: change one element without worrying that it breaks another page
Many beginners think the long class lists look messy at first. After a few days, most find them easy to read, because everything about an element is in one place.
Tailwind vs Bootstrap
| Tailwind CSS | Bootstrap |
|---|---|
| Small utility classes | Ready-made components (buttons, navbars, cards) |
| Every site can look different | Sites often look similar |
| You design everything yourself | Quick start with a standard look |
Both are good. Tailwind gives more freedom, Bootstrap gives more ready parts. This tutorial teaches Tailwind CSS version 4.
Exercise
Exercise
What does "utility-first" mean in Tailwind CSS?