This note is from 8 months ago. You're viewing content from a previous lesson.
At the start of every class, please:
Please bookmark this site: https://nerdcave.com/tailwind-cheat-sheet
Tailwind is a utility-first CSS framework. Instead of writing your own CSS rules, you use pre-made class names directly in your HTML.
Example:
<p class="text-red-500 font-bold">Hello World</p>
This makes the text red and bold without writing a CSS file.
For beginners, we’ll use the CDN link (no installation needed).
Create an index.html file and copy this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Tailwind Page</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-6">
<h1 class="text-3xl font-bold text-blue-600">Hello Tailwind!</h1>
<p class="mt-4 text-lg text-gray-700">This is my first Tailwind page.</p>
<button class="mt-6 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600">
Click Me
</button>
</body>
</html>
Open in your browser → you’ll see Tailwind styles applied.
Tailwind gives you tiny building blocks (classes) that you combine:
text-xl → big text
bg-red-500 → red background
p-4 → padding 1rem
rounded-lg → rounded corners
hover:bg-blue-600 → change color when hovering
You stack them together to make custom designs.
<p class="text-sm">Small text</p>
<p class="text-lg font-bold">Large bold text</p>
<p class="text-blue-500 underline">Blue underlined text</p>
<div class="bg-yellow-200 p-4">Yellow background</div>
<div class="bg-green-500 text-white p-4">Green box with white text</div>
<div class="flex space-x-4">
<div class="w-1/2 bg-red-300 p-4">Half width</div>
<div class="w-1/2 bg-blue-300 p-4">Half width</div>
</div>
Create a simple profile card:
<div class="max-w-sm mx-auto bg-white shadow-lg rounded-xl p-6">
<img class="w-24 h-24 mx-auto rounded-full" src="https://via.placeholder.com/150" alt="Profile picture">
<h2 class="mt-4 text-center text-2xl font-semibold text-gray-800">Student Name</h2>
<p class="text-center text-gray-600">Future Programmer</p>
<button class="mt-6 w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600">
Follow
</button>
</div>
Play with colors (bg-red-500, bg-green-200)
Change sizes (text-2xl, p-8, w-1/3)
Add hover effects (hover:text-red-500)
๐ By the end of this tutorial, students should be able to:
Add Tailwind via CDN
Use utility classes for text, color, and layout
Build a small card component
Positioning is about where elements go on a page. Tailwind gives us utility classes to control layout without writing custom CSS.
Flexbox (short for Flexible Box Layout) is a way of arranging elements on a page so they can automatically adjust their size and position depending on the screen or container.
Instead of manually calculating widths and heights, Flexbox gives you tools to:
Place elements in a row (horizontal) or in a column (vertical).
Control spacing between elements.
Align elements to the left, right, center, top, or bottom.
Make elements grow, shrink, or stay fixed depending on available space.
Flexbox makes it easy to arrange items horizontally or vertically.
<div class="flex space-x-4 bg-gray-200 p-4">
<div class="bg-red-300 p-4">Box 1</div>
<div class="bg-green-300 p-4">Box 2</div>
<div class="bg-blue-300 p-4">Box 3</div>
</div>
flex → turns container into a flexbox.
space-x-4 → adds horizontal space between items.
<div class="flex flex-col space-y-4 bg-gray-200 p-4">
<div class="bg-red-300 p-4">Top</div>
<div class="bg-green-300 p-4">Middle</div>
<div class="bg-blue-300 p-4">Bottom</div>
</div>
flex-col → stacks items vertically.
space-y-4 → adds vertical space.
Tailwind makes it simple to align items.
<div class="flex items-center justify-center h-32 bg-gray-200">
<p class="text-lg font-bold">Centered Text</p>
</div>
items-center → vertical alignment.
justify-center → horizontal alignment.
h-32 → sets height so centering is visible.
You can place elements in exact spots using positioning utilities.
<div class="relative bg-gray-200 h-40">
<div class="absolute top-2 left-2 bg-blue-400 p-2">Top Left</div>
<div class="absolute bottom-2 right-2 bg-green-400 p-2">Bottom Right</div>
</div>
relative → parent container is the reference.
absolute top-2 left-2 → child placed in top-left.
absolute bottom-2 right-2 → child placed in bottom-right.
<div class="flex">
<div class="w-1/3 bg-yellow-300 p-4">Sidebar</div>
<div class="w-2/3 bg-blue-200 p-4">Main Content</div>
</div>
w-1/3 → one-third width.
w-2/3 → two-thirds width.
<div class="flex justify-between items-center bg-gray-800 text-white p-4">
<h1 class="text-xl font-bold">My Site</h1>
<div class="space-x-6">
<a href="#" class="hover:text-blue-400">Home</a>
<a href="#" class="hover:text-blue-400">About</a>
<a href="#" class="hover:text-blue-400">Contact</a>
</div>
</div>
justify-between → pushes content apart.
items-center → vertically centers links.
Create a 2-column layout with a sidebar (left) and content (right).
Make a navbar with links aligned horizontally.
Place a button in the bottom-right corner of a container using absolute.
Center a message both horizontally and vertically on the page.
๐ By the end of this lesson, students should be able to:
Use flexbox for horizontal/vertical layouts.
Align elements with items-center and justify-center.
Use absolute/relative positioning.
Build basic layouts like navbars and sidebars.