// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f5ff',
          500: '#3b82f6',
          900: '#1e3a5f',
        },
      },
      animation: {
        'slide-up': 'slideUp 0.3s ease-out',
        'fade-in': 'fadeIn 0.5s ease-in',
      },
      keyframes: {
        slideUp: {
          '0%': { transform: 'translateY(10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
      },
    },
  },
}

@layer components {
  .btn-primary {
    @apply bg-brand-500 text-white px-6 py-2 rounded-lg
           hover:bg-brand-600 transition-colors
           focus:ring-2 focus:ring-brand-500 focus:ring-offset-2;
  }

  .card {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-sm
           border border-gray-200 dark:border-gray-700 p-6;
  }
}

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  <!-- Responsive grid that adapts from 1 to 4 columns -->
</div>

<!-- Container queries (Tailwind 3.4+) -->
<div class="@container">
  <div class="@sm:flex @sm:gap-4">
    <img class="@sm:w-48" />
    <div>Content</div>
  </div>
</div>

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <h1 class="text-2xl font-bold">
    Automatically adapts to user's color scheme
  </h1>
</div>