Part 2: Tailwind CSS

⏱️ Duration: 15 minutes | Learn how to build beautiful UIs without writing custom CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework. Instead of writing custom CSS, you apply pre-built classes directly in your HTML. It’s like building with LEGO instead of carving from scratch! 🧱

Traditional CSS vs Tailwind

.card {
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 20px;
  font-weight: bold;
  color: #1f2937;
}

<div class="bg-white rounded-lg p-6 shadow-md">
  <h2 class="text-xl font-bold text-gray-800">
    Card Title
  </h2>
</div>

Why do developers love Tailwind? You never leave your HTML file. No more context-switching, no more inventing class names like .card-wrapper-container-inner-box 😅

🤯 Did you know? Tailwind CSS has over 80,000+ GitHub stars and is used by Netflix, OpenAI, Shopify, and NASA!

Core Utilities

Spacing (Padding & Margin)

Tailwind uses a simple numbering system for spacing:

Class	Size	Example
`p-1`	4px	`<div class="p-1">`
`p-2`	8px	`<div class="p-2">`
`p-4`	16px	`<div class="p-4">`
`p-6`	24px	`<div class="p-6">`
`p-8`	32px	`<div class="p-8">`

Variants:

p-4 = padding on all sides
px-4 = padding left and right
py-4 = padding top and bottom
pt-4 = padding top only
m-4 = margin (same pattern)

Colors

Tailwind provides a beautiful color palette:

<!-- Text colors -->
<p class="text-gray-500">Gray text</p>
<p class="text-blue-600">Blue text</p>
<p class="text-red-500">Red text</p>

<!-- Background colors -->
<div class="bg-white">White background</div>
<div class="bg-gray-100">Light gray</div>
<div class="bg-blue-500">Blue background</div>

Try it! 👇 Mix and match Tailwind classes:

Typography

<!-- Font sizes -->
<p class="text-sm">Small</p>
<p class="text-base">Base (default)</p>
<p class="text-lg">Large</p>
<p class="text-xl">Extra large</p>
<p class="text-2xl">2X large</p>

<!-- Font weight -->
<p class="font-normal">Normal</p>
<p class="font-medium">Medium</p>
<p class="font-semibold">Semibold</p>
<p class="font-bold">Bold</p>

Layout with Flexbox

Flexbox is incredibly easy with Tailwind:

<!-- Horizontal layout with gap -->
<div class="flex gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Centered content -->
<div class="flex items-center justify-center h-screen">
  <p>I'm centered!</p>
</div>

<!-- Space between items -->
<div class="flex justify-between">
  <div>Left</div>
  <div>Right</div>
</div>

Building a Card Component

Let’s build a beautiful card step by step:

<div class="max-w-sm rounded-xl bg-white p-6 shadow-lg">
  <!-- Image -->
  <img
    class="h-48 w-full rounded-lg object-cover"
    src="https://picsum.photos/400/300"
    alt="Card image"
  />

  <!-- Content -->
  <div class="mt-4">
    <h3 class="text-xl font-semibold text-gray-900">
      Card Title
    </h3>
    <p class="mt-2 text-gray-600">
      This is a beautiful card built with Tailwind CSS.
      No custom CSS needed!
    </p>
  </div>

  <!-- Button -->
  <button class="mt-4 w-full rounded-lg bg-blue-600 px-4 py-2 font-medium text-white hover:bg-blue-700">
    Learn More
  </button>
</div>

Try it! 👇 Click the like button:

Responsive Design

Add breakpoint prefixes for responsive styles:

Prefix	Screen Width
`sm:`	640px+
`md:`	768px+
`lg:`	1024px+
`xl:`	1280px+

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <!-- 1 column on mobile, 2 on tablet, 3 on desktop -->
  <div class="bg-white p-4 rounded-lg">Card 1</div>
  <div class="bg-white p-4 rounded-lg">Card 2</div>
  <div class="bg-white p-4 rounded-lg">Card 3</div>
</div>

Beginner Tip: Tailwind is “mobile-first”. Write styles for mobile, then add md: or lg: for larger screens.

Hover and Focus States

Add interactivity with state prefixes:

<!-- Hover effects -->
<button class="bg-blue-500 hover:bg-blue-600 transition-colors">
  Hover me
</button>

<!-- Focus states -->
<input
  class="border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 rounded-lg px-4 py-2"
  placeholder="Focus me"
/>

Quick Reference

What you want	Tailwind class
Rounded corners	`rounded-lg`
Shadow	`shadow-md`
Flex row	`flex`
Flex column	`flex flex-col`
Center items	`items-center justify-center`
Full width	`w-full`
Fixed height	`h-64` (256px)
Hide on mobile	`hidden md:block`
Show only on mobile	`block md:hidden`

Learn More

Tailwind CSS Docs

The official Tailwind CSS documentation with all utilities.

Next up: TypeScript →

Overview

Platform

Build

Learn

Reference

What is Tailwind CSS?

Traditional CSS vs Tailwind

Core Utilities

Spacing (Padding & Margin)

Colors

Typography

Layout with Flexbox

Building a Card Component

Responsive Design

Hover and Focus States

Quick Reference

Learn More

Tailwind CSS Docs

​What is Tailwind CSS?

​Traditional CSS vs Tailwind

​Core Utilities

​Spacing (Padding & Margin)

​Colors

​Typography

​Layout with Flexbox

​Building a Card Component

​Responsive Design

​Hover and Focus States

​Quick Reference

​Learn More

Tailwind CSS Docs

What is Tailwind CSS?

Traditional CSS vs Tailwind

Core Utilities

Spacing (Padding & Margin)

Colors

Typography

Layout with Flexbox

Building a Card Component

Responsive Design

Hover and Focus States

Quick Reference

Learn More