Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs directly in your markup. Instead of pre-designed components, Tailwind gives you the building blocks to create unique designs without writing custom CSS.

Key Features

  • Utility-First: Compose designs using utility classes
  • Responsive Design: Built-in responsive design utilities
  • Customizable: Highly configurable design system
  • Performance: Purge unused CSS for optimal file sizes
  • Developer Experience: IntelliSense and excellent tooling
  • Dark Mode: Built-in dark mode support

Basic Example

<!-- Traditional CSS approach -->
<div class="card">
  <h2 class="card-title">Card Title</h2>
  <p class="card-text">Card content</p>
</div>

<!-- Tailwind CSS approach -->
<div class="bg-white rounded-lg shadow-md p-6">
  <h2 class="text-xl font-bold mb-2">Card Title</h2>
  <p class="text-gray-600">Card content</p>
</div>

Common Utility Classes

Layout & Spacing:

  • flex, grid, block, inline - Display properties
  • p-4, m-2, px-6, my-8 - Padding and margin
  • w-full, h-screen, max-w-md - Width and height

Typography:

  • text-lg, text-xl, text-2xl - Font sizes
  • font-bold, font-medium - Font weights
  • text-center, text-left - Text alignment

Colors & Backgrounds:

  • bg-blue-500, bg-gray-100 - Background colors
  • text-red-600, text-green-500 - Text colors
  • border-gray-300 - Border colors

Responsive Design

<!-- Responsive utilities -->
<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- Full width on mobile, half on tablet, third on desktop -->
</div>

<!-- Responsive text sizes -->
<h1 class="text-2xl md:text-4xl lg:text-6xl">
  Responsive Heading
</h1>

Benefits

  • Rapid Development: Build designs quickly without writing CSS
  • Consistency: Predefined design system ensures consistency
  • Maintainability: No CSS files to maintain, styles in markup
  • Performance: Only ship CSS that's actually used
  • Flexibility: Easy to customize and extend
  • Mobile-First: Built with responsive design in mind

Configuration

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1e40af',
        'brand-green': '#10b981',
      },
      fontFamily: {
        'custom': ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

Learning Path

  1. CSS Fundamentals: Understand basic CSS concepts
  2. Installation: Set up Tailwind in your project
  3. Utility Classes: Learn common utility patterns
  4. Responsive Design: Master responsive utilities
  5. Customization: Configure themes and extend defaults
  6. Components: Build reusable component patterns
  7. Advanced Features: Plugins, JIT mode, and optimization