Tailwind CSS Essentials

Tailwind CSS is a utility-first CSS framework that lets you build modern designs without leaving your HTML.

What is Utility-First CSS?

Instead of writing custom CSS classes, Tailwind provides low-level utility classes:

<!-- ❌ Traditional CSS -->
<style>
  .card { padding: 1rem; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
</style>
<div class="card">Hello</div>

<!-- ✅ Tailwind -->
<div class="p-4 rounded-lg shadow-sm">Hello</div>

Core Concepts

Utility Classes

Tailwind provides utilities for every CSS property:

<!-- Spacing -->
<div class="p-4 m-2">Padding and margin</div>

<!-- Display -->
<div class="flex justify-center items-center">Centered content</div>

<!-- Typography -->
<p class="text-lg font-bold text-gray-900">Large bold text</p>

<!-- Colors -->
<button class="bg-blue-500 text-white hover:bg-blue-600">Click me</button>

Responsive Design

Use breakpoint prefixes for responsive layouts:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

Breakpoints

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

Dark Mode

Enable dark mode easily:

<div class="bg-white dark:bg-slate-900 text-black dark:text-white">
  Content that works in both light and dark modes
</div>

Building Components

Button Component

<button class="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors">
  Click me
</button>

Card Component

<div class="bg-white rounded-lg shadow-md p-6">
  <h3 class="text-xl font-bold mb-2">Card Title</h3>
  <p class="text-gray-600">Card content goes here</p>
</div>

Customization

Extend Tailwind's default configuration:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6',
      },
      spacing: {
        '128': '32rem',
      }
    }
  }
}

Best Practices

1. Use consistent spacing scale: Stick to Tailwind's spacing values
2. Create component classes for repeated patterns
3. Use @apply for custom components: When you need to reuse utility combinations
4. Avoid premature abstraction: Utility classes are meant to be used directly
5. Leverage dark mode: Build accessible interfaces for all lighting conditions

Performance

Tailwind only includes the CSS you actually use:

# Development - includes all utilities
npm run dev

# Production - purged and optimized
npm run build

Tailwind CSS dramatically speeds up your design workflow while keeping your CSS bundle size small!