Tailwind CSS Complete Guide: Modern Styling Made Easy

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs directly in your markup, without writing custom CSS.

Why Tailwind?

Traditional CSS	Tailwind CSS
Write custom CSS	Use utility classes
Naming conventions	No class naming
Large CSS files	Purged, minimal CSS
Context switching	Style in markup

Installation

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,html}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Core Concepts

Utility Classes

<!-- Traditional CSS -->
<div class="card">
  <h2 class="card-title">Title</h2>
</div>

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

Responsive Design

<!-- Mobile-first approach -->
<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- Full width on mobile, half on medium, third on large -->
</div>

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

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

State Variants

<!-- Hover, Focus, Active -->
<button class="
  bg-blue-500
  hover:bg-blue-600
  focus:ring-2
  focus:ring-blue-300
  active:bg-blue-700
">
  Button
</button>

<!-- Dark mode -->
<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
  Dark mode support
</div>

<!-- Group hover -->
<div class="group">
  <h3 class="group-hover:text-blue-500">Title</h3>
  <p class="group-hover:text-gray-600">Description</p>
</div>

<!-- Peer states -->
<input class="peer" type="checkbox" />
<label class="peer-checked:text-blue-500">Checkbox label</label>

Layout

Flexbox

<!-- Flex container -->
<div class="flex items-center justify-between gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Flex direction -->
<div class="flex flex-col md:flex-row">
  <!-- Column on mobile, row on medium+ -->
</div>

<!-- Flex wrap -->
<div class="flex flex-wrap">
  <div class="w-1/2 md:w-1/3">Item</div>
</div>

<!-- Flex grow/shrink -->
<div class="flex">
  <div class="flex-none w-14">Fixed</div>
  <div class="flex-1">Grows</div>
  <div class="flex-none w-14">Fixed</div>
</div>

Grid

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

<!-- Responsive grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
</div>

<!-- Grid span -->
<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2">Wide item</div>
  <div>Normal</div>
  <div>Normal</div>
</div>

<!-- Auto-fit grid -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
  <!-- Responsive without breakpoints -->
</div>

Container and Spacing

<!-- Container -->
<div class="container mx-auto px-4">
  <!-- Centered with horizontal padding -->
</div>

<!-- Spacing scale -->
<!-- 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96 -->

<div class="p-4 m-2">Padding 1rem, Margin 0.5rem</div>
<div class="px-4 py-2">Horizontal/Vertical</div>
<div class="pt-4 pr-2 pb-4 pl-2">Individual sides</div>
<div class="space-y-4">
  <!-- Vertical spacing between children -->
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Typography

<!-- Font size -->
<p class="text-xs">Extra small</p>
<p class="text-sm">Small</p>
<p class="text-base">Base (1rem)</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-light">Light</p>
<p class="font-normal">Normal</p>
<p class="font-medium">Medium</p>
<p class="font-semibold">Semibold</p>
<p class="font-bold">Bold</p>

<!-- Text color -->
<p class="text-gray-500">Gray text</p>
<p class="text-blue-600">Blue text</p>
<p class="text-red-500/50">50% opacity</p>

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

<!-- Line height and letter spacing -->
<p class="leading-tight tracking-wide">Styled text</p>

<!-- Truncate -->
<p class="truncate">Very long text that will be truncated...</p>
<p class="line-clamp-2">Multi-line truncation...</p>

Backgrounds and Borders

<!-- Background colors -->
<div class="bg-white">White</div>
<div class="bg-gray-100">Light gray</div>
<div class="bg-blue-500">Blue</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-500">Gradient</div>

<!-- Background images -->
<div class="bg-cover bg-center bg-no-repeat"
     style="background-image: url('image.jpg')">
</div>

<!-- Borders -->
<div class="border">1px border</div>
<div class="border-2 border-blue-500">2px blue border</div>
<div class="border-t-4 border-red-500">Top border only</div>

<!-- Border radius -->
<div class="rounded">Small radius</div>
<div class="rounded-lg">Large radius</div>
<div class="rounded-full">Circle/pill</div>
<div class="rounded-t-lg">Top only</div>

<!-- Shadows -->
<div class="shadow">Small shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">Extra large shadow</div>

Components

Button

<button class="
  px-4 py-2
  bg-blue-500 hover:bg-blue-600
  text-white font-medium
  rounded-lg
  transition-colors
  focus:outline-none focus:ring-2 focus:ring-blue-300
  disabled:opacity-50 disabled:cursor-not-allowed
">
  Click me
</button>

<!-- Outline button -->
<button class="
  px-4 py-2
  border-2 border-blue-500
  text-blue-500 hover:bg-blue-50
  rounded-lg
  transition-colors
">
  Outline
</button>

Card

<div class="
  bg-white
  rounded-xl
  shadow-lg
  overflow-hidden
  hover:shadow-xl
  transition-shadow
">
  <img src="image.jpg" alt="" class="w-full h-48 object-cover" />
  <div class="p-6">
    <h3 class="text-xl font-bold text-gray-800 mb-2">Card Title</h3>
    <p class="text-gray-600 mb-4">Card description goes here.</p>
    <button class="text-blue-500 hover:text-blue-600 font-medium">
      Learn more →
    </button>
  </div>
</div>

Form Input

<div class="space-y-4">
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">
      Email
    </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-colors
      "
      placeholder="you@example.com"
    />
  </div>

  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">
      Message
    </label>
    <textarea
      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
        resize-none
      "
      rows="4"
    ></textarea>
  </div>
</div>

Navigation

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

      <div class="hidden md:flex space-x-8">
        <a href="#" class="text-gray-600 hover:text-blue-500 transition-colors">
          Home
        </a>
        <a href="#" class="text-gray-600 hover:text-blue-500 transition-colors">
          About
        </a>
        <a href="#" class="text-gray-600 hover:text-blue-500 transition-colors">
          Contact
        </a>
      </div>

      <button class="md:hidden">
        <!-- Mobile menu button -->
      </button>
    </div>
  </div>
</nav>

Custom Configuration

Extend Theme

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          500: '#0ea5e9',
          900: '#0c4a6e',
        },
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
      spacing: {
        '128': '32rem',
      },
      animation: {
        'spin-slow': 'spin 3s linear infinite',
      },
    },
  },
}

Custom Utilities

/* In your CSS file */
@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}

Component Classes

@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-colors;
  }

  .btn-primary {
    @apply bg-blue-500 text-white hover:bg-blue-600;
  }

  .card {
    @apply bg-white rounded-xl shadow-lg p-6;
  }
}

Animations

<!-- Built-in animations -->
<div class="animate-spin">Spinning</div>
<div class="animate-ping">Pinging</div>
<div class="animate-pulse">Pulsing</div>
<div class="animate-bounce">Bouncing</div>

<!-- Transitions -->
<button class="
  transition-all
  duration-300
  ease-in-out
  hover:scale-105
  hover:shadow-lg
">
  Hover me
</button>

<!-- Transform -->
<div class="hover:rotate-12 hover:scale-110 transition-transform">
  Transform on hover
</div>

Dark Mode

// tailwind.config.js
module.exports = {
  darkMode: 'class', // or 'media'
}

<!-- Toggle dark mode -->
<html class="dark">
  <body class="bg-white dark:bg-gray-900 text-black dark:text-white">
    <div class="bg-gray-100 dark:bg-gray-800">
      Dark mode enabled
    </div>
  </body>
</html>

Summary

Feature	Classes
Spacing	p-, m-, space-*
Colors	bg-, text-, border-*
Layout	flex, grid, container
Responsive	sm:, md:, lg:, xl:
States	hover:, focus:, active:
Dark mode	dark:

Tailwind CSS enables rapid UI development with consistent, maintainable styles.