Tailwind CSS Crash Course — 10 Steps

Beginner → Practical → Build

Tailwind CSS is a utility-first CSS framework that lets you style directly in HTML using tiny, single-purpose classes. This page is a paste-ready HTML blog version of the "Tailwind CSS Crash Course in 10 Steps".

Contents

1. What is Tailwind CSS?
2. Getting Started
3. Basics of Utility Classes
4. Layout with Flexbox
5. Layout with Grid
6. Styling Buttons
7. Styling Cards
8. Responsive Design with Breakpoints
9. Typography & Spacing
10. Final Mini Project: Landing Page Header

---

1. What is Tailwind CSS?

Tailwind is a utility-first CSS framework. Instead of creating CSS classes for components, you compose small utility classes directly in the markup.

Traditional CSS:

.button {

  background-color: #3b82f6;

  padding: 8px 16px;

  border-radius: 6px;

  color: white;

}

Tailwind version:

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

---

2. Getting Started

Fastest way to try Tailwind — include the CDN in your page:

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

For production, follow the official docs to build with PostCSS / CLI and purge unused classes.

---

3. Basics of Utility Classes

Each Tailwind class performs a single job. Combine classes to create the final UI.

• bg-blue-500 — background color
• text-lg — font size
• p-4 — padding
• m-2 — margin
• rounded-lg — border radius

<p class="text-lg text-gray-700 p-4 bg-gray-100 rounded-lg">

  Tailwind makes styling fast and consistent!

</p>

---

4. Layout with Flexbox

Flex is expressive and easy to use with Tailwind.

<div class="flex items-center justify-between p-4 bg-gray-200">

  <div>Logo</div>

  <div class="flex gap-4">

    <a href="#">Home</a>

    <a href="#">About</a>

  </div>

</div>

Key classes: flex, items-center, justify-between, gap-4.

---

5. Layout with Grid

Grid is just as straightforward:

<div class="grid grid-cols-3 gap-4">

  <div class="bg-red-200 p-4">Box 1</div>

  <div class="bg-green-200 p-4">Box 2</div>

  <div class="bg-blue-200 p-4">Box 3</div>

</div>

---

6. Styling Buttons

Buttons are tiny collections of utility classes:

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

  Get Started

</button>

Add states like hover: to make interactive styling trivial.

---

7. Styling Cards

Cards are just a set of utility classes that form a compact component:

<div class="max-w-sm bg-white shadow-md rounded-lg p-6">

  <h2 class="text-xl font-semibold mb-2">Tailwind Card</h2>

  <p class="text-gray-600">Utility classes make UI building simple.</p>

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

</div>

Useful utilities: shadow-md, max-w-sm, p-6.

---

8. Responsive Design with Breakpoints

Tailwind uses prefixes like sm:, md:, lg: to apply utilities at certain breakpoints.

<div class="text-base md:text-lg lg:text-xl">

  Resize the window to see me grow!

</div>

Layout example:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

  <div class="bg-red-200 p-4">Box 1</div>

  <div class="bg-green-200 p-4">Box 2</div>

  <div class="bg-blue-200 p-4">Box 3</div>

</div>

---

9. Typography & Spacing

Tailwind covers typography (weight, tracking, line-height), colors, and spacing with utilities.

<h1 class="text-3xl font-bold text-gray-800 mb-4">Hello Tailwind</h1>

<p class="text-gray-600 leading-relaxed">

  Tailwind makes responsive design and styling effortless.

</p>

---

10. Final Mini Project — Responsive Landing Page Header

Put the pieces together: a clean header with logo, nav (hidden on mobile), and a mobile menu button.

<!-- Landing Page Header: copy-paste this into your HTML body -->

<header class="bg-white shadow-md">

  <div class="max-w-6xl mx-auto flex items-center justify-between p-4">

    <h1 class="text-2xl font-bold text-blue-600">MySite</h1>

    <nav class="hidden md:flex gap-6 items-center">

      <a href="#" class="text-gray-700 hover:text-blue-500">Home</a>

      <a href="#" class="text-gray-700 hover:text-blue-500">About</a>

      <a href="#" class="text-gray-700 hover:text-blue-500">Contact</a>

    </nav>

    <!-- Mobile menu button -->

    <button class="md:hidden bg-blue-500 text-white px-3 py-2 rounded" aria-label="Open menu">

      Menu

    </button>

  </div>

</header>

This header is responsive: on md and above you see the nav; on smaller screens the Menu button appears. Extend this with a mobile drawer or toggle using a tiny bit of JavaScript.

---

Wrap-up

You just learned the essentials of Tailwind: utilities, flex & grid, components like buttons & cards, responsive breakpoints, typography, and built a small real-world header. Try rebuilding a header from a site you like — replace colors, spacing, and add interactions.

Next steps

• Convert this header into a mobile menu (add JS toggle).
• Build a full landing hero using grid + responsive utilities.
• Set up a proper production build of Tailwind (purge unused classes).

Made for quick learning — drop this file into any project and tweak. Want a 10-tweet thread version or a mini codepen/demo? Tell me which and I’ll output it ready to paste.