tailwind.css

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

.link {
  @apply text-blue-500 visited:text-purple-500 underline;
}

@media (prefers-color-scheme: dark) {
  input[type="number"],
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="checkbox"],
  input[type="date"] {
    @apply text-white bg-slate-700;
  }
  input[type="number"],
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="date"]{
    @apply rounded;
  }
  input[type="checkbox"] {
    @apply text-black bg-white rounded cursor-pointer;
  }
  textarea {
    @apply bg-slate-700 text-white;
  }
  .link:visited {
    @apply text-yellow-400;
  }
}

.tooltip {
  @apply relative;
}

.tooltip:focus:after,
.tooltip:hover:after {
  @apply bg-slate-600 text-white absolute p-2 rounded-md;
  content: attr(data-tooltip);
  top: -80px;
  left: 0px;
}

.tooltip:focus:before,
.tooltip:hover:before {
  content: "";
  position: absolute;
  display: block;
  top: -5px;
  left: 8px;
  width: 10px;
  margin: auto;
  border-left: 5px solid transparent;
  border-top: 5px solid #475569;
  border-right: 5px solid transparent;
}

.tooltip-left-0:focus:after,
.tooltip-left-0:hover:after {
  left: 0;
}

.tooltip-wide:focus:after,
.tooltip-wide:hover:after {
  left: 20%;
}

.tooltip-drf:focus:after,
.tooltip-drf:hover:after {
  width: 200%;
}