Modern CSS with Tailwind

Tailwind CSS has revolutionized how we write CSS. Its utility-first approach enables rapid UI development while maintaining consistency.

Why Tailwind?

• **Faster Development** - Build UIs without leaving HTML
• **Consistent Design** - Predefined spacing and sizing scales
• **Smaller Bundle Size** - Unused styles are purged automatically
• **Highly Customizable** - Configure everything to match your brand

Core Concepts

Utility Classes

Apply styles directly in your markup:

<div class="flex items-center justify-between p-4 bg-card rounded-lg shadow">
  <h2 class="text-2xl font-bold text-foreground">Title</h2>
  <button class="px-4 py-2 bg-primary text-primary-foreground rounded hover:bg-primary/90">
    Click me
  </button>
</div>

Responsive Design

Use responsive prefixes:

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

Dark Mode

Leverage dark mode variants:

<div class="bg-card text-foreground">
  Content
</div>

Custom Configuration

Extend Tailwind in your config:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          // ... more shades
        }
      }
    }
  }
}

Best Practices

1. **Use @apply sparingly** - Keep components utility-first 2. **Extract patterns** - Create reusable component classes 3. **Use JIT mode** - Faster builds and smaller bundles 4. **Organize utilities** - Group related classes together

Tailwind CSS empowers you to build beautiful interfaces faster than ever before.