Tailwind CSS Practical Guide - Utility-First CSS

What You’ll Learn in This Tutorial

✓ Tailwind CSS basic concepts
✓ Layout and spacing
✓ Responsive design
✓ Colors and typography
✓ Practical UI components
✓ Customization and optimization

Prerequisites

• Basic knowledge of HTML and CSS
• Node.js installed

Project Setup

# Create project
mkdir tailwind-tutorial
cd tailwind-tutorial
npm init -y

# Install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer

# Create config files
npx tailwindcss init -p

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

src/input.css

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

Build Command

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

Step 1: Basic Utility Classes

Spacing (Padding & Margin)

<!-- Padding -->
<div class="p-4">All sides padding: 1rem</div>
<div class="px-4">Horizontal padding: 1rem</div>
<div class="py-2">Vertical padding: 0.5rem</div>
<div class="pt-8">Top padding: 2rem</div>
<div class="pb-6">Bottom padding: 1.5rem</div>

<!-- Margin -->
<div class="m-4">All sides margin: 1rem</div>
<div class="mx-auto">Horizontal auto (centering)</div>
<div class="my-8">Vertical margin: 2rem</div>
<div class="mt-4">Top margin: 1rem</div>
<div class="mb-2">Bottom margin: 0.5rem</div>

<!-- Negative Margin -->
<div class="-mt-4">Negative top margin: -1rem</div>

<!-- Spacing Scale -->
<!--
  0: 0px
  1: 0.25rem (4px)
  2: 0.5rem (8px)
  3: 0.75rem (12px)
  4: 1rem (16px)
  5: 1.25rem (20px)
  6: 1.5rem (24px)
  8: 2rem (32px)
  10: 2.5rem (40px)
  12: 3rem (48px)
  16: 4rem (64px)
  ...
-->

Size (Width & Height)

<!-- Width -->
<div class="w-full">100%</div>
<div class="w-1/2">50%</div>
<div class="w-1/3">33.333%</div>
<div class="w-64">16rem (256px)</div>
<div class="w-screen">100vw</div>
<div class="max-w-md">max-width: 28rem</div>
<div class="min-w-0">min-width: 0</div>

<!-- Height -->
<div class="h-screen">100vh</div>
<div class="h-full">100%</div>
<div class="h-64">16rem</div>
<div class="min-h-screen">min-height: 100vh</div>

Colors

<!-- Text Color -->
<p class="text-black">Black</p>
<p class="text-white">White</p>
<p class="text-gray-500">Gray 500</p>
<p class="text-blue-600">Blue 600</p>
<p class="text-red-500">Red 500</p>

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

<!-- Opacity -->
<div class="bg-black/50">50% transparent black</div>
<div class="text-blue-500/75">75% transparent blue text</div>

<!-- Border Color -->
<div class="border border-gray-300">Gray border</div>

Step 2: Flexbox and Grid

Flexbox

<!-- Basic Flex -->
<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Direction -->
<div class="flex flex-row">Horizontal (default)</div>
<div class="flex flex-col">Vertical</div>
<div class="flex flex-row-reverse">Horizontal (reverse)</div>

<!-- Alignment -->
<div class="flex justify-start">Left align</div>
<div class="flex justify-center">Center</div>
<div class="flex justify-end">Right align</div>
<div class="flex justify-between">Space between</div>
<div class="flex justify-around">Space around</div>

<div class="flex items-start">Top align</div>
<div class="flex items-center">Center align</div>
<div class="flex items-end">Bottom align</div>

<!-- Center Both -->
<div class="flex items-center justify-center h-screen">
  Perfectly centered
</div>

<!-- Wrap -->
<div class="flex flex-wrap">
  Allow wrapping
</div>

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

<!-- Flex Children -->
<div class="flex">
  <div class="flex-1">Grow equally</div>
  <div class="flex-none">Don't grow</div>
  <div class="flex-grow">Grow</div>
  <div class="flex-shrink-0">Don't shrink</div>
</div>

Grid

<!-- Basic Grid -->
<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

<!-- Column Count -->
<div class="grid grid-cols-1">1 column</div>
<div class="grid grid-cols-2">2 columns</div>
<div class="grid grid-cols-4">4 columns</div>
<div class="grid grid-cols-12">12 columns</div>

<!-- Rows -->
<div class="grid grid-rows-3">3 rows</div>

<!-- Span -->
<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2">2 columns wide</div>
  <div>1 column</div>
  <div>1 column</div>
  <div class="col-span-4">4 columns (full width)</div>
</div>

<!-- Auto Fit -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
  <!-- Auto-adjust at 200px minimum -->
</div>

Step 3: Responsive Design

Breakpoints

<!--
  sm: 640px and up
  md: 768px and up
  lg: 1024px and up
  xl: 1280px and up
  2xl: 1536px and up
-->

<!-- Mobile First -->
<div class="text-sm md:text-base lg:text-lg">
  <!-- default: small -->
  <!-- md and up: base -->
  <!-- lg and up: large -->
</div>

<!-- Responsive Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  <!-- Mobile: 1 column -->
  <!-- sm: 2 columns -->
  <!-- lg: 3 columns -->
  <!-- xl: 4 columns -->
</div>

<!-- Responsive Show/Hide -->
<div class="hidden md:block">Show on md and up</div>
<div class="block md:hidden">Show below md</div>

<!-- Responsive Flexbox -->
<div class="flex flex-col md:flex-row gap-4">
  <!-- Mobile: vertical -->
  <!-- md and up: horizontal -->
</div>

Practical Example: Responsive Header

<header class="bg-white shadow">
  <div class="container mx-auto px-4">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <a href="/" class="text-xl font-bold">Logo</a>

      <!-- Desktop Nav -->
      <nav class="hidden md:flex gap-6">
        <a href="/" class="text-gray-600 hover:text-gray-900">Home</a>
        <a href="/about" class="text-gray-600 hover:text-gray-900">About</a>
        <a href="/services" class="text-gray-600 hover:text-gray-900">Services</a>
        <a href="/contact" class="text-gray-600 hover:text-gray-900">Contact</a>
      </nav>

      <!-- Mobile Menu Button -->
      <button class="md:hidden p-2">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
    </div>
  </div>
</header>

Step 4: Typography

Font Size

<p class="text-xs">Extra Small (0.75rem)</p>
<p class="text-sm">Small (0.875rem)</p>
<p class="text-base">Base (1rem)</p>
<p class="text-lg">Large (1.125rem)</p>
<p class="text-xl">Extra Large (1.25rem)</p>
<p class="text-2xl">2XL (1.5rem)</p>
<p class="text-3xl">3XL (1.875rem)</p>
<p class="text-4xl">4XL (2.25rem)</p>
<p class="text-5xl">5XL (3rem)</p>

Font Weight

<p class="font-thin">Thin (100)</p>
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>
<p class="font-extrabold">Extrabold (800)</p>

Text Styles

<!-- Line Height -->
<p class="leading-tight">Tight line height</p>
<p class="leading-normal">Normal line height</p>
<p class="leading-loose">Loose line height</p>

<!-- Letter Spacing -->
<p class="tracking-tight">Tight letter spacing</p>
<p class="tracking-wide">Wide letter spacing</p>

<!-- Text Alignment -->
<p class="text-left">Left align</p>
<p class="text-center">Center align</p>
<p class="text-right">Right align</p>
<p class="text-justify">Justify</p>

<!-- Text Decoration -->
<p class="underline">Underline</p>
<p class="line-through">Strikethrough</p>
<p class="no-underline">No underline</p>

<!-- Text Transform -->
<p class="uppercase">UPPERCASE</p>
<p class="lowercase">lowercase</p>
<p class="capitalize">Capitalize</p>

<!-- Text Truncation -->
<p class="truncate">Long text truncated with...</p>
<p class="line-clamp-2">Clamp at 2 lines</p>

Step 5: States and Interactions

Hover & Focus

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

<!-- Focus -->
<input
  class="border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/50 rounded px-3 py-2 outline-none"
  placeholder="Style changes on focus"
/>

<!-- Active -->
<button class="bg-blue-500 active:bg-blue-700 text-white px-4 py-2 rounded">
  Color changes on click
</button>

<!-- Multiple States -->
<a
  href="#"
  class="text-blue-500 hover:text-blue-700 hover:underline focus:outline-none focus:ring-2"
>
  Link
</a>

Group Hover

<div class="group cursor-pointer p-4 border rounded hover:bg-gray-50">
  <h3 class="font-bold group-hover:text-blue-500">
    Title
  </h3>
  <p class="text-gray-600 group-hover:text-gray-900">
    Description
  </p>
  <span class="text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity">
    View details →
  </span>
</div>

Dark Mode

<!-- Toggle with dark class on parent element -->
<div class="dark">
  <div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white p-4">
    Dark mode compatible content
  </div>
</div>

Step 6: Practical Components

Card

<div class="bg-white rounded-lg shadow-md overflow-hidden max-w-sm">
  <img
    src="https://via.placeholder.com/400x200"
    alt="Card image"
    class="w-full h-48 object-cover"
  />
  <div class="p-6">
    <span class="text-xs font-semibold text-blue-500 uppercase tracking-wide">
      Category
    </span>
    <h2 class="mt-2 text-xl font-bold text-gray-900">
      Card Title
    </h2>
    <p class="mt-2 text-gray-600">
      Card description goes here. It can span multiple lines.
    </p>
    <div class="mt-4 flex items-center justify-between">
      <span class="text-2xl font-bold text-gray-900">$19.80</span>
      <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors">
        Purchase
      </button>
    </div>
  </div>
</div>

Form

<form class="max-w-md mx-auto space-y-6">
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">
      Name
    </label>
    <input
      type="text"
      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-shadow"
      placeholder="John Doe"
    />
  </div>

  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">
      Email Address
    </label>
    <input
      type="email"
      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-shadow"
      placeholder="example@email.com"
    />
  </div>

  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">
      Message
    </label>
    <textarea
      rows="4"
      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-shadow resize-none"
      placeholder="Enter your message"
    ></textarea>
  </div>

  <div class="flex items-center">
    <input
      type="checkbox"
      id="terms"
      class="w-4 h-4 text-blue-500 border-gray-300 rounded focus:ring-blue-500"
    />
    <label for="terms" class="ml-2 text-sm text-gray-600">
      I agree to the terms
    </label>
  </div>

  <button
    type="submit"
    class="w-full py-3 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg transition-colors"
  >
    Submit
  </button>
</form>

Navigation Tabs

<div class="border-b border-gray-200">
  <nav class="flex -mb-px">
    <a
      href="#"
      class="px-6 py-3 border-b-2 border-blue-500 text-blue-500 font-medium"
    >
      Home
    </a>
    <a
      href="#"
      class="px-6 py-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
    >
      Profile
    </a>
    <a
      href="#"
      class="px-6 py-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
    >
      Settings
    </a>
  </nav>
</div>

Alerts

<!-- Success -->
<div class="flex items-center p-4 bg-green-50 border-l-4 border-green-500 text-green-700">
  <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
  </svg>
  <span>Saved successfully.</span>
</div>

<!-- Error -->
<div class="flex items-center p-4 bg-red-50 border-l-4 border-red-500 text-red-700">
  <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"/>
  </svg>
  <span>An error occurred.</span>
</div>

<!-- Warning -->
<div class="flex items-center p-4 bg-yellow-50 border-l-4 border-yellow-500 text-yellow-700">
  <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"/>
  </svg>
  <span>Attention required.</span>
</div>

Best Practices

1. Mobile First
   - Default styles for mobile
   - Extend with breakpoints

2. Organizing Classes
   - Order: layout → spacing → size → color → other
   - Auto-sort with Prettier plugin

3. Component Extraction
   - Componentize repeating patterns
   - Create custom classes with @apply

4. Performance
   - Unused classes removed in production build
   - Fast builds with JIT mode

Summary

Tailwind CSS enables rapid UI building with its utility-first approach. Once you learn the basic classes, you can create flexible designs with HTML alone. Responsive and dark mode support make it ideal for modern web development.