@import "tailwindcss";

/* Force Tailwind to look for a .dark class up the HTML tree instead of checking the user's operating system preferences. */
@custom-variant dark (&:where(.dark, .dark *));

/* Base layer customization with Tailwind CSS classes - applies to elements like p, a, img */
@layer base {
  h2 {
    @apply dark:text-pink-500;
  }
}

/* Components layer - Specify rules for components like btn, card, badge, etc. */
@layer components {
  .btn {
    @apply inline-block rounded p-2 bg-gray-300  hover:bg-gray-900 dark:bg-neutral-800 dark:hover:bg-neutral-700 hover:text-white transition;
  }
}