Chapter 2: Working with Utility Classes (Tailwind CSS)
1. Introduction to Utility Classes
Utility classes are the foundation of Tailwind CSS.
Each utility class performs one specific task, such as setting margin,
padding, color, font size, or alignment.
Example:
<p class="text-center text-blue-600 font-bold">
Welcome to Tailwind CSS
</p>
2. Advantages of Utility Classes
Faster development
No need to write separate CSS files
Consistent design system
Responsive and customizable
Easy to maintain and scale
3. Text Utility Classes
a) Text Alignment
Class Description
text-left Align text to left
text-center Center text
text-right Align text to right
text-justify Justify text
<p class="text-center">Centered text</p>
b) Text Size
Class Size
text-xs Extra small
text-sm Small
text-base Normal
text-lg Large
text-xl Extra large
text-2xl Very large
<h1 class="text-2xl">Heading</h1>
c) Font Weight
Class Description
font-light Light
font-normal Normal
font-medium Medium
font-bold Bold
font-extrabold Extra bold
<p class="font-bold">Bold text</p>
d) Text Color
<p class="text-red-500">Red Text</p>
<p class="text-green-600">Green Text</p>
4. Line Height and Letter Spacing
a) Line Height
Class Effect
leading-none Very tight
leading-tight Tight
leading-normal Normal
leading-relaxed Relaxed
<p class="leading-relaxed">Paragraph text</p>
b) Letter Spacing
Class Effect
tracking-tight Tight
tracking-normal Normal
tracking-wide Wide
<p class="tracking-wide">Spaced letters</p>
5. Spacing Utilities (Margin & Padding)
a) Margin
Class Description
m-4 Margin all sides
mt-4 Margin top
mb-4 Margin bottom
ml-4 Margin left
mr-4 Margin right
mx-4 Horizontal margin
my-4 Vertical margin
<div class="mt-4 mb-6">Content</div>
b) Padding
Class Description
p-4 Padding all sides
pt-2 Padding top
px-6 Horizontal padding
py-3 Vertical padding
<button class="px-4 py-2">Click Me</button>
6. Width and Height Utilities
a) Fixed & Auto Sizes
Class Meaning
w-16 Fixed width
h-16 Fixed height
w-auto Auto width
h-auto Auto height
b) Percentage & Viewport Sizes
Class Meaning
w-1/2 50% width
w-full 100% width
h-screen Full viewport height
w-screen Full viewport width
<div class="w-full h-screen bg-gray-200"></div>
7. Color Utilities
a) Background Color
<div class="bg-blue-500 text-white">Box</div>
b) Border Color
<div class="border border-red-500">Bordered Box</div>
8. Combining Multiple Utility Classes
Multiple utility classes can be used together to build complex designs.
<div class="p-6 bg-gray-100 text-center text-lg font-semibold">
Utility Classes Example
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tailwind Utility Classes Demo</title>
<script src="[Link]
</head>
<body class="bg-gray-100 p-6">
<!-- Container -->
<div class="w-1/2 mx-auto p-6 bg-white border border-blue-500
rounded-lg">
<!-- Heading -->
<h1 class="text-2xl text-center font-bold text-blue-600 tracking-
wide mb-4">
Tailwind Utility Classes
</h1>
<!-- Paragraph -->
<p class="text-base text-gray-700 leading-relaxed mb-4">
This example demonstrates text alignment, font size, colors,
spacing, width, height, and borders using Tailwind CSS utility
classes.
</p>
<!-- Box -->
<div class="w-full h-24 bg-green-200 text-center leading-loose mb-
4">
Box with width, height & background color
</div>
<!-- Button -->
<button class="px-4 py-2 bg-blue-500 text-white font-medium
rounded">
Click Me
</button>
</div>
</body>
</html>