Add Use Tailwind Typography Prose In Dark Mode as a tailwind til

README.md

@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud).
 
-_1113 TILs and counting..._
+_1114 TILs and counting..._
 
 ---
 
@@ -974,6 +974,7 @@ _1113 TILs and counting..._
 
 - [Base Styles For Text Link](tailwind/base-styles-for-text-link.md)
 - [Specify Paths For Purging Unused CSS](tailwind/specify-paths-for-purging-unused-css.md)
+- [Use Tailwind Typography Prose In Dark Mode](tailwind/use-tailwind-typography-prose-in-dark-mode.md)
 
 ### tmux
 

tailwind/use-tailwind-typography-prose-in-dark-mode.md

@@ -0,0 +1,33 @@
+# Use Tailwind Typography Prose In Dark Mode
+
+Tailwindcss can be set up to provide styled defaults for both standard (light)
+mode and dark mode. Once this is set up, you can add a toggle mechanism to
+switch between light and dark mode. [This
+post](https://egghead.io/blog/tailwindcss-dark-mode-nextjs-typography-prose)
+goes into all those details.
+
+This can even be used with [Tailwind's
+typography](https://github.com/tailwindlabs/tailwindcss-typography) plugin.
+`typography` provides default styling which is great if you don't control the
+markup that is being rendered or if you want to provide some defaults to a
+chunk of markup.
+
+A chunk of markup that uses typography will minimally look something like this:
+
+```jsx
+<div className="prose">
+  <h1>{title}</h1>
+  {markdownAsHtml}
+</div>
+```
+
+To give this reasonable dark mode defaults, you'll need to add a `dark`-mode
+class as well. Using the `dark` prefix, you can apply the `prose-dark` class to
+the top-level div.
+
+```jsx
+<div className="prose dark:prose-dark">
+  <h1>{title}</h1>
+  {markdownAsHtml}
+</div>
+```