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)

# Create project
mkdir my-project
cd my-project
npm init -y

# Install Tailwind
npm install -D tailwindcss
npx tailwindcss init

# Create your CSS file
echo '@tailwind base;
@tailwind components;
@tailwind utilities;' > input.css

# Build CSS
npx tailwindcss -i ./input.css -o ./output.css --watch

Update tailwind.config.js:

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

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