style.tailwind.css

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

@layer base {
  html { @apply font-body bg-background }
  body { @apply md:container md:max-w-3xl mx-auto p-5 sm:px-10 my-10 max-w-prose }
}

@layer components {
  /* .metadata { @apply text-warm-gray-600 } */
  .markdown-body { @apply !font-body }
  .markdown-body a { @apply link-color font-semibold }
  .markdown-body a:not(.no-underline) { @apply link-underline }
  .markdown-body ul { @apply list-disc }
  .markdown-body img { @apply mx-auto }
  .markdown-body figure { @apply mx-auto my-5 }
  .markdown-body figcaption { @apply text-center text-sm }
  .markdown-body cite { @apply italic }

  .comments .TimelineItem { @apply md:ml-[88px] }
  .comments .TimelineItem-avatar { @apply hidden md:block }
  .comments .comment .TimelineItem-body { @apply ml-[-16px] }

  h1.heading { @apply font-ud-shin-go-bold mt-[24px] mb-[16px] pb-[.3em] text-4xl }
  h2.heading { @apply font-ud-shin-go-bold mt-[24px] mb-[16px] pb-[.3em] text-3xl }
  h3.heading { @apply font-ud-shin-go-bold mt-[24px] mb-[16px] pb-[.3em] text-2xl }
  h4.heading { @apply font-ud-shin-go-bold mt-[24px] mb-[16px] pb-[.3em] text-xl }
  h5.heading { @apply font-ud-shin-go-bold mt-[24px] mb-[16px] pb-[.3em] text-lg }
  h6.heading { @apply font-ud-shin-go-bold mt-[24px] mb-[16px] pb-[.3em] }
}

@layer utilities {
  .link { @apply link-color link-underline }
  .link-color { @apply text-teal-600 }
  .link-underline { @apply underline decoration-slate-300 decoration-2 hover:decoration-teal-600 }
  .bg-shadow { @apply rounded inset-0 bg-teal-200 opacity-25 z-[-1] }
  .font-ud-shin-go-bold { -webkit-text-stroke-width: 1px; @apply font-ud-shin-go; }
}