Tailwind CSS

A utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.

Why Tailwind CSS?

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Utility-First

Build complex components with a cascade of utilities

Fully Responsive

Every utility class can be applied conditionally at different breakpoints

Component-Friendly

Extract repeated utility patterns into custom CSS components

Core Concepts

Key Principles:

  • Utility-First - Build complex designs without writing CSS
  • Responsive Design - Built-in responsive modifiers (sm:, md:, lg:, xl:)
  • Component-Driven - Extract patterns while maintaining utility benefits
  • Customizable - Complete control via configuration file
  • Production-Ready - Purges unused CSS for optimal performance

Basic Utilities Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Basics</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-4xl font-bold text-gray-800 mb-8 text-center">Tailwind CSS Basics</h1>

    <!-- Spacing & Colors -->
    <div class="bg-white p-6 rounded-lg shadow-md mb-6">
      <h2 class="text-2xl font-semibold text-gray-700 mb-4">Spacing & Colors</h2>
      <div class="space-y-4">
        <div class="p-4 bg-blue-500 text-white rounded">p-4 bg-blue-500 text-white</div>
        <div class="px-6 py-3 bg-green-500 text-white rounded-lg">px-6 py-3 bg-green-500</div>
        <div class="m-4 p-4 bg-purple-600 text-white rounded-full">m-4 p-4 bg-purple-600 rounded-full</div>
      </div>
    </div>

    <!-- Typography -->
    <div class="bg-white p-6 rounded-lg shadow-md mb-6">
      <h2 class="text-2xl font-semibold text-gray-700 mb-4">Typography</h2>
      <div class="space-y-2">
        <h1 class="text-4xl font-bold text-gray-900">Heading 1 - text-4xl font-bold</h1>
        <h2 class="text-2xl font-semibold text-gray-800">Heading 2 - text-2xl font-semibold</h2>
        <p class="text-lg text-gray-600">Paragraph - text-lg text-gray-600</p>
        <p class="text-base text-gray-500 leading-relaxed">Leading relaxed text with comfortable line height for better readability.</p>
      </div>
    </div>

    <!-- Flexbox -->
    <div class="bg-white p-6 rounded-lg shadow-md mb-6">
      <h2 class="text-2xl font-semibold text-gray-700 mb-4">Flexbox Layout</h2>
      <div class="flex space-x-4">
        <div class="flex-1 p-4 bg-red-500 text-white rounded text-center">flex-1</div>
        <div class="flex-1 p-4 bg-yellow-500 text-white rounded text-center">flex-1</div>
        <div class="flex-1 p-4 bg-green-500 text-white rounded text-center">flex-1</div>
      </div>
    </div>

    <!-- Grid -->
    <div class="bg-white p-6 rounded-lg shadow-md">
      <h2 class="text-2xl font-semibold text-gray-700 mb-4">Grid Layout</h2>
      <div class="grid grid-cols-3 gap-4">
        <div class="p-4 bg-indigo-500 text-white rounded text-center">col 1</div>
        <div class="p-4 bg-indigo-600 text-white rounded text-center">col 2</div>
        <div class="p-4 bg-indigo-700 text-white rounded text-center">col 3</div>
      </div>
    </div>
  </div>
</body>
</html>

Building Components

Component Approach:

  • Button Components - Variants with hover and focus states
  • Card Layouts - Flexible containers with shadows and borders
  • Navigation - Responsive navbars with flexbox utilities
  • Alert Systems - Contextual feedback with color coding
  • Form Controls - Consistent styling across all inputs

Components Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Components</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 p-8">
  <div class="max-w-6xl mx-auto">
    <h1 class="text-4xl font-bold text-gray-800 mb-8 text-center">Tailwind Components</h1>

    <!-- Buttons -->
    <div class="bg-white p-6 rounded-lg shadow-md mb-6">
      <h2 class="text-2xl font-semibold text-gray-700 mb-4">Button Variants</h2>
      <div class="flex flex-wrap gap-4">
        <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">
          Primary Button
        </button>
        <button class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 transition-colors">
          Secondary Button
        </button>
        <button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition-colors">
          Success Button
        </button>
        <button class="px-4 py-2 border border-blue-500 text-blue-500 rounded hover:bg-blue-500 hover:text-white transition-colors">
          Outline Button
        </button>
      </div>
    </div>

    <!-- Cards -->
    <div class="bg-white p-6 rounded-lg shadow-md mb-6">
      <h2 class="text-2xl font-semibold text-gray-700 mb-4">Card Components</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-6">
          <h3 class="text-xl font-semibold text-gray-800 mb-2">Basic Card</h3>
          <p class="text-gray-600 mb-4">This is a simple card component built with Tailwind CSS utility classes.</p>
          <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">
            Learn More
          </button>
        </div>
        <div class="bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg shadow-sm p-6 text-white">
          <h3 class="text-xl font-semibold mb-2">Gradient Card</h3>
          <p class="mb-4 opacity-90">Card with beautiful gradient background and white text.</p>
          <button class="px-4 py-2 bg-white text-purple-600 rounded hover:bg-gray-100 transition-colors">
            Get Started
          </button>
        </div>
      </div>
    </div>

    <!-- Navigation -->
    <div class="bg-white p-6 rounded-lg shadow-md mb-6">
      <h2 class="text-2xl font-semibold text-gray-700 mb-4">Navigation Bar</h2>
      <nav class="bg-gray-800 text-white p-4 rounded-lg">
        <div class="flex justify-between items-center">
          <div class="text-xl font-bold">Brand</div>
          <div class="flex space-x-6">
            <a href="#" class="hover:text-blue-300 transition-colors">Home</a>
            <a href="#" class="hover:text-blue-300 transition-colors">About</a>
            <a href="#" class="hover:text-blue-300 transition-colors">Services</a>
            <a href="#" class="hover:text-blue-300 transition-colors">Contact</a>
          </div>
        </div>
      </nav>
    </div>

    <!-- Alerts -->
    <div class="bg-white p-6 rounded-lg shadow-md">
      <h2 class="text-2xl font-semibold text-gray-700 mb-4">Alert Components</h2>
      <div class="space-y-4">
        <div class="p-4 bg-blue-100 border border-blue-300 text-blue-700 rounded">
          Information alert message for users.
        </div>
        <div class="p-4 bg-green-100 border border-green-300 text-green-700 rounded">
          Success! Your action was completed successfully.
        </div>
        <div class="p-4 bg-yellow-100 border border-yellow-300 text-yellow-700 rounded">
          Warning: Please check your input data.
        </div>
        <div class="p-4 bg-red-100 border border-red-300 text-red-700 rounded">
          Error: Something went wrong with your request.
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Form Styling

Form Features:

  • Input Styling - Consistent borders, focus states, and spacing
  • Form Layouts - Responsive multi-column forms
  • Validation States - Error and success styling
  • Interactive Elements - Hover, focus, and disabled states
  • Accessibility - Proper focus indicators and labels

Forms Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Forms</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 p-8">
  <div class="max-w-2xl mx-auto">
    <h1 class="text-4xl font-bold text-gray-800 mb-8 text-center">Tailwind Forms</h1>

    <!-- Basic Form -->
    <div class="bg-white p-6 rounded-lg shadow-md mb-6">
      <h2 class="text-2xl font-semibold text-gray-700 mb-4">Contact Form</h2>
      <form class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">Full Name</label>
          <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Enter your name">
        </div>
        
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">Email Address</label>
          <input type="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Enter your email">
        </div>
        
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">Subject</label>
          <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
            <option>General Inquiry</option>
            <option>Support Request</option>
            <option>Feature Suggestion</option>
          </select>
        </div>
        
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">Message</label>
          <textarea rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Enter your message"></textarea>
        </div>
        
        <div class="flex items-center">
          <input type="checkbox" class="h-4 w-4 text-blue-500 focus:ring-blue-500 border-gray-300 rounded">
          <label class="ml-2 text-sm text-gray-700">Subscribe to newsletter</label>
        </div>
        
        <button type="submit" class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
          Send Message
        </button>
      </form>
    </div>

    <!-- Form Layouts -->
    <div class="bg-white p-6 rounded-lg shadow-md">
      <h2 class="text-2xl font-semibold text-gray-700 mb-4">Multi-column Form</h2>
      <form class="space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">First Name</label>
            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Last Name</label>
            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
          </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">City</label>
            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">State</label>
            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">ZIP</label>
            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
          </div>
        </div>
      </form>
    </div>
  </div>
</body>
</html>

Responsive Design

Responsive Features:

  • Breakpoint Prefixes - sm:, md:, lg:, xl: for responsive control
  • Mobile-First - Base styles for mobile, enhanced for larger screens
  • Flexible Grids - Responsive grid utilities
  • Adaptive Typography - Text sizing that scales with screen size
  • Conditional Visibility - Show/hide elements based on breakpoints

Responsive Design Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Responsive</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 p-4">
  <div class="max-w-6xl mx-auto">
    <h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-8 text-center">Tailwind Responsive Design</h1>

    <!-- Responsive Grid -->
    <div class="bg-white p-6 rounded-lg shadow-md mb-6">
      <h2 class="text-2xl font-semibold text-gray-700 mb-4">Responsive Grid System</h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="bg-blue-500 p-4 text-white rounded text-center">1 column on mobile</div>
        <div class="bg-green-500 p-4 text-white rounded text-center">2 columns on small</div>
        <div class="bg-purple-500 p-4 text-white rounded text-center">4 columns on large</div>
        <div class="bg-red-500 p-4 text-white rounded text-center">Fully responsive</div>
      </div>
    </div>

    <!-- Responsive Typography -->
    <div class="bg-white p-6 rounded-lg shadow-md mb-6">
      <h2 class="text-2xl font-semibold text-gray-700 mb-4">Responsive Typography</h2>
      <p class="text-base sm:text-lg lg:text-xl text-gray-600 leading-relaxed">
        This text scales responsively: base size on mobile, lg on small screens, xl on large screens.
        Tailwind makes it easy to create typography that adapts to different screen sizes.
      </p>
    </div>

    <!-- Responsive Navigation -->
    <div class="bg-white p-6 rounded-lg shadow-md mb-6">
      <h2 class="text-2xl font-semibold text-gray-700 mb-4">Responsive Navigation</h2>
      <nav class="bg-gray-800 text-white p-4 rounded-lg">
        <div class="flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0">
          <div class="text-xl font-bold">Responsive Nav</div>
          <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-6 text-center">
            <a href="#" class="hover:text-blue-300 transition-colors">Home</a>
            <a href="#" class="hover:text-blue-300 transition-colors">Features</a>
            <a href="#" class="hover:text-blue-300 transition-colors">Pricing</a>
            <a href="#" class="hover:text-blue-300 transition-colors">Contact</a>
          </div>
          <button class="bg-blue-500 px-4 py-2 rounded hover:bg-blue-600 transition-colors">
            Get Started
          </button>
        </div>
      </nav>
    </div>

    <!-- Responsive Cards -->
    <div class="bg-white p-6 rounded-lg shadow-md">
      <h2 class="text-2xl font-semibold text-gray-700 mb-4">Responsive Card Layout</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="border border-gray-200 rounded-lg p-6 hover:shadow-lg transition-shadow">
          <h3 class="text-lg font-semibold mb-2">Mobile First</h3>
          <p class="text-gray-600">Design for mobile devices first, then scale up for larger screens.</p>
        </div>
        <div class="border border-gray-200 rounded-lg p-6 hover:shadow-lg transition-shadow">
          <h3 class="text-lg font-semibold mb-2">Flexible Grid</h3>
          <p class="text-gray-600">Automatically adapts to different screen sizes and orientations.</p>
        </div>
        <div class="border border-gray-200 rounded-lg p-6 hover:shadow-lg transition-shadow">
          <h3 class="text-lg font-semibold mb-2">Utility First</h3>
          <p class="text-gray-600">Build complex responsive layouts directly in your HTML.</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Quick Start Guide

CDN Method (Playground)

<!-- Playground version -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- For production, use specific version -->
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>

npm Installation (Production)

# Install via npm
npm install -D tailwindcss

# Initialize config file
npx tailwindcss init

# Add to your CSS
@tailwind base;
@tailwind components;
@tailwind utilities;

# Build for production
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Best Practices

✅ Do This

  • Use @apply for components - Extract repeated patterns
  • Leverage responsive prefixes - Build mobile-first
  • Customize via config - Extend rather than override
  • Use semantic HTML - Maintain accessibility
  • Purge for production - Remove unused CSS

❌ Avoid This

  • Overusing @apply - Keep utility-first benefits
  • Ignoring breakpoints - Always consider responsive design
  • Arbitrary values - Use the design system when possible
  • Deep nesting - Keep HTML readable and maintainable
  • Inline styles - Use Tailwind utilities instead

Ready to Build with Tailwind?

Start creating beautiful, responsive designs with the utility-first CSS framework that works the way you think.

< PreviousNext >