blog/src/app/globals.css

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

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;
}

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

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

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

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;
}