how to replace tailwindcss typography plugin with @applys to support dark mode https://github.com/tailwindlabs/tailwindcss-typography/issues/69

manual typography plugin since i got fed up with dark mode.md

this is what i use so far, its obviously not a 100% replica of the typography plugin but looks good enough on my site

  /* replace typography plugin */
  .prose {
    @apply text-gray-700 dark:text-gray-300
  }
  .prose {
    & p {
      @apply my-5
    }
    & h1 {
      @apply text-black dark:text-white;
      font-weight: 800;
      font-size: 2.25em;
      margin-top: 0;
      margin-bottom: 0.8888889em;
      line-height: 1.1111111;
    }
    & h2, & h3, & h4, & h5, & h6 {
      @apply text-black dark:text-white;
      font-weight: 700;
      font-size: 1.5em;
      margin-top: 2em;
      margin-bottom: 1em;
      line-height: 1.3333333;
    }
    & strong {
      @apply text-indigo-900 dark:text-indigo-100 shadow-sm rounded
    }
    & a {
      @apply mylink
    }
    & pre {
      @apply text-xs p-6 bg-indigo-300 dark:bg-indigo-900 overflow-x-auto
    }
    & code {
      @apply text-sm bg-indigo-200 dark:bg-indigo-900 bg-opacity-50 px-1 py-2
    }
    & pre code {
      @apply bg-transparent p-0
    }
    & blockquote {
      @apply border-l-4 border-purple-800 dark:border-purple-200
    }
    & blockquote:before {
      @apply bg-purple-100 dark:bg-purple-900 bg-opacity-10
    }
    & ul {
      @apply leading-6 list-disc ml-4
    }
    & ul li {
      @apply mb-2 
    }
    & ul ul {
      @apply mt-2 
    }
    & img {
      @apply max-h-full my-4 mx-auto block
    }
  }

Sergio's notes https://sergiodxa.com/articles/use-tailwindcss-typography-with-dark-mode-styles

That's neat! Adapting typography styles inside the tailwind config was always a pain. Will give this a shot next time.