01 - Getting Started

What is Tailwind CSS?

Tailwind is a utility-first CSS framework. Instead of writing custom CSS classes, you apply small, single-purpose utility classes directly in your HTML.

<!-- Traditional CSS -->
<style>
  .button {
    background-color: blue;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
  }
</style>
<button class="button">Click me</button>

<!-- Tailwind CSS -->
<button class="bg-blue-500 text-white px-4 py-2 rounded">
  Click me
</button>

Installation

Via CDN (Quick Start)

Add this to your HTML <head>:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-600">
    Hello Tailwind!
  </h1>
</body>
</html>

Note: The CDN is great for learning and prototyping, but not recommended for production.

Via npm (Production)

Tailwind has two major versions in use. The utility classes (the focus of this course) work the same in both — only the setup differs.

Tailwind v4 (latest)

mkdir my-project && cd my-project
npm init -y
npm install -D tailwindcss @tailwindcss/cli

Create input.css:

@import "tailwindcss";

Build:

npx @tailwindcss/cli -i ./input.css -o ./output.css --watch

v4 uses CSS-based configuration — no config file needed. Customizations go in your CSS:

@import "tailwindcss";

@theme {
  --color-brand: #3b82f6;
}

Tailwind v3

mkdir my-project && cd my-project
npm init -y
npm install -D tailwindcss
npx tailwindcss init

Create input.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Update tailwind.config.js:

module.exports = {
  content: ["./**/*.html"],
  theme: { extend: {} },
  plugins: [],
}

Build:

npx tailwindcss -i ./input.css -o ./output.css --watch

Link the output

Either way, link output.css in your HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="output.css" />
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-600">Hello Tailwind!</h1>
</body>
</html>

Basic Utilities

Text

<!-- Size -->
<p class="text-sm">Small text</p>
<p class="text-base">Normal text</p>
<p class="text-lg">Large text</p>
<p class="text-xl">Extra large</p>
<p class="text-2xl">2X large</p>

<!-- Weight -->
<p class="font-light">Light</p>
<p class="font-normal">Normal</p>
<p class="font-medium">Medium</p>
<p class="font-bold">Bold</p>

<!-- Alignment -->
<p class="text-left">Left aligned</p>
<p class="text-center">Centered</p>
<p class="text-right">Right aligned</p>

<!-- Color -->
<p class="text-black">Black text</p>
<p class="text-gray-500">Gray text</p>
<p class="text-blue-600">Blue 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>
<div class="bg-red-600">Red background</div>
<div class="bg-green-500">Green background</div>

Tailwind uses a scale from 50 (lightest) to 950 (darkest):

<div class="bg-blue-50">Lightest blue</div>
<div class="bg-blue-500">Medium blue</div>
<div class="bg-blue-950">Darkest blue</div>

Padding and Margin

Spacing uses a scale where 1 unit = 0.25rem (4px):

<!-- Padding -->
<div class="p-4">Padding all sides (1rem / 16px)</div>
<div class="px-4">Padding left and right</div>
<div class="py-4">Padding top and bottom</div>
<div class="pt-4">Padding top only</div>
<div class="pr-4">Padding right only</div>
<div class="pb-4">Padding bottom only</div>
<div class="pl-4">Padding left only</div>

<!-- Margin -->
<div class="m-4">Margin all sides</div>
<div class="mx-4">Margin left and right</div>
<div class="my-4">Margin top and bottom</div>
<div class="mt-8">Margin top (2rem / 32px)</div>

<!-- Common values -->
<!-- 0 = 0px -->
<!-- 1 = 4px -->
<!-- 2 = 8px -->
<!-- 4 = 16px -->
<!-- 8 = 32px -->
<!-- 16 = 64px -->

Width and Height

<!-- Fixed width -->
<div class="w-64">Width 256px (16rem)</div>
<div class="w-96">Width 384px (24rem)</div>

<!-- Percentage width -->
<div class="w-1/2">50% width</div>
<div class="w-1/3">33.33% width</div>
<div class="w-full">100% width</div>

<!-- Height -->
<div class="h-16">Height 64px</div>
<div class="h-screen">Full viewport height</div>

<!-- Max/Min width -->
<div class="max-w-md">Max width 28rem (448px)</div>
<div class="max-w-lg">Max width 32rem (512px)</div>
<div class="max-w-xl">Max width 36rem (576px)</div>
<div class="min-w-0">Min width 0</div>

Borders

<!-- Border width -->
<div class="border">1px border</div>
<div class="border-2">2px border</div>
<div class="border-4">4px border</div>

<!-- Border sides -->
<div class="border-t">Top border only</div>
<div class="border-r">Right border only</div>
<div class="border-b">Bottom border only</div>
<div class="border-l">Left border only</div>

<!-- Border color -->
<div class="border border-gray-300">Gray border</div>
<div class="border border-blue-500">Blue border</div>

<!-- Border radius -->
<div class="rounded">Small rounded corners</div>
<div class="rounded-md">Medium rounded</div>
<div class="rounded-lg">Large rounded</div>
<div class="rounded-full">Fully rounded (circle/pill)</div>

Combining Utilities

The power of Tailwind is combining multiple utilities:

<!-- Card component -->
<div class="bg-white border border-gray-200 rounded-lg p-6 shadow-md">
  <h2 class="text-2xl font-bold text-gray-800 mb-2">Card Title</h2>
  <p class="text-gray-600">Card description goes here.</p>
</div>

<!-- Button -->
<button class="bg-blue-500 text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-600">
  Click Me
</button>

<!-- Input field -->
<input
  type="text"
  class="border border-gray-300 rounded-lg px-4 py-2 w-full focus:outline-none focus:border-blue-500"
  placeholder="Enter your name"
/>

Hover, Focus, and States

Add pseudo-class variants with prefixes:

<!-- Hover state -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
  Hover me
</button>

<!-- Focus state -->
<input class="border focus:border-blue-500 focus:ring-2 focus:ring-blue-200" />

<!-- Active state -->
<button class="bg-blue-500 active:bg-blue-700">
  Press me
</button>

<!-- Disabled state -->
<button class="disabled:opacity-50 disabled:cursor-not-allowed">
  Disabled
</button>

<!-- Multiple states -->
<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 disabled:opacity-50">
  Multi-state
</button>

Practical Example

Let's build a simple profile card:

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">
  <div class="max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
    <!-- Image -->
    <img
      src="https://via.placeholder.com/400x200"
      alt="Cover"
      class="w-full h-48 object-cover"
    />

    <!-- Content -->
    <div class="p-6">
      <h2 class="text-2xl font-bold text-gray-800 mb-2">John Doe</h2>
      <p class="text-gray-600 mb-4">Full Stack Developer</p>
      <p class="text-gray-500 text-sm mb-6">
        Passionate about building amazing web experiences with modern technologies.
      </p>

      <!-- Button -->
      <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition duration-200">
        Follow
      </button>
    </div>
  </div>
</body>
</html>

Key Takeaways

Tailwind uses utility classes directly in HTML
Use the CDN for quick prototyping, npm for production
Spacing scale: 1 = 0.25rem (4px)
Colors range from 50 (lightest) to 950 (darkest)
Combine utilities to build components
Add state variants with prefixes: hover:, focus:, active:
The utility-first approach keeps styling close to markup