From 42ee326715d54f353f2995f21057ef19e915d511 Mon Sep 17 00:00:00 2001
From: jbranchaud <jbranchaud@gmail.com>
Date: Mon, 12 Apr 2021 14:17:38 -0500
Subject: [PATCH] Add Use Tailwind Typography Prose In Dark Mode as a tailwind
 til

---
 README.md                                     |  3 +-
 ...-tailwind-typography-prose-in-dark-mode.md | 33 +++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 tailwind/use-tailwind-typography-prose-in-dark-mode.md

diff --git a/README.md b/README.md
index 52056e9..1c7021c 100644
--- a/README.md
+++ b/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
 
diff --git a/tailwind/use-tailwind-typography-prose-in-dark-mode.md b/tailwind/use-tailwind-typography-prose-in-dark-mode.md
new file mode 100644
index 0000000..6648314
--- /dev/null
+++ b/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>
+```