panel/resources/scripts/assets/css/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply bg-[#fafafa] dark:bg-primary dark:text-stone-400;
}

.description {
  @apply dark:text-stone-400 text-stone-500;
}

.description-small {
  @apply dark:text-stone-400 text-stone-500 text-sm;
}

.text-auto {
  @apply text-black dark:text-white;
}

.bg-auto {
  @apply bg-white dark:bg-black;
}

.dt {
  @apply text-gray-500 text-xs font-medium uppercase tracking-wide;
}

.dd {
  @apply text-black mt-1 font-medium;
}

.border-colors {
  @apply border-[#eaeaea] dark:border-[#333333];
}

.border-colors-hover {
  @apply border-[#eaeaea] dark:border-[#333333] hover:dark:border-white;
}

.h5 {
  @apply text-base font-semibold text-black dark:text-white;
}

.h6 {
  @apply text-base font-semibold
}

.fade-enter,
.fade-exit,
.fade-appear {
  will-change: opacity;
}

.fade-enter,
.fade-appear {
  @apply opacity-0;
}

.fade-enter-active,
.fade-appear-active {
  @apply opacity-100 transition-opacity ease-in;
  transition-duration: 150ms;
}

.fade-exit {
  @apply opacity-100;
}

.fade-exit-active {
  @apply opacity-0 transition-opacity ease-in;
  transition-duration: 150ms;
}