blog/src/app/globals.css

@import "tailwindcss";

@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}

@layer base {
  h1 {
    @apply text-4xl;
  }

  h2 {
    @apply text-2xl;
  }

  a {
    @apply underline;
  }

  li {
    @apply list-disc;
    @apply list-inside;
    @apply text-left;
  }

  p {
    @apply text-justify;
    @apply mb-2;
  }

  img {
    @apply mx-auto;
  }

  blockquote,
  blockquote p {
    @apply text-center;
  }

  blockquote {
    border-left: 5px solid var(--accent);
    box-shadow: inset 4px 0 10px -4px var(--accent);
    padding-left: 1rem;
    margin: 1rem;
  }

  figcaption {
    @apply text-sm;
    @apply text-center;
    @apply italic;
  }

  pre {
    @apply text-left;
    @apply bg-gray-100;
    @apply p-2;
    @apply rounded-md;
    @apply border;
    @apply border-gray-300;
    @apply overflow-x-auto;
    @apply whitespace-pre-wrap;
    @apply break-words;
    @apply text-sm;
    @apply font-mono;
  }

  code:not(pre code) {
    @apply text-sm;
    @apply font-mono;
    @apply bg-gray-100;
    @apply p-1;
    @apply rounded-md;
    @apply border;
    @apply border-gray-300;
    @apply overflow-x-auto;
    @apply whitespace-pre-wrap;
    @apply break-words;
  }
}

.is-dark blockquote,
.is-dark blockquote p {
  color: var(--foreground);
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}