index.css

@tailwind base;

:root {
  --c-text: #333;
  --c-background: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-text: #999;
    --c-background: #1a1919;
  }
}

body {
  color: var(--c-text);
  background-color: var(--c-background);
  transition: background-color 0.3s ease;
}

.dark-mode-checkbox:checked ~ body {
  --c-text: var(--c-dark-text);
  --c-background: var(--c-dark-background);
}

blockquote {
  @apply ml-4 pl-4 border-gray-400 border-l-4 italic;
}

figcaption {
  @apply text-center italic py-2;
}

ul {
  @apply list-inside list-disc;
}

li:not(:last-of-type) {
  @apply mb-4;
}

/* Start purging... */
@tailwind components;
/* Stop purging. */

/* Write you own custom component styles here */

/* Start purging... */
@tailwind utilities;
/* Stop purging. */

/* Your own custom utilities */

.markdown {
  @apply text-lg leading-relaxed;
}

.markdown p,
.markdown ul,
.markdown ol,
.markdown blockquote {
  @apply my-6;
}

.markdown h2 {
  @apply text-3xl mt-12 mb-4 leading-snug;
}

.markdown h3 {
  @apply text-2xl mt-8 mb-4 leading-snug;
}

.markdown a {
  @apply underline;
}

.markdown :not(pre) > code {
  @apply bg-gray-400 px-1 rounded text-gray-900;
}