Add description list (<dl>, <dt>, <dd>) styles

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `<picture>` styles ([#314](https://github.com/tailwindlabs/tailwindcss-typography/pull/314))
 - Fix `prose-invert` when used with colors in light mode ([#315](https://github.com/tailwindlabs/tailwindcss-typography/pull/315))
 - Add `<kbd>` styles ([#317](https://github.com/tailwindlabs/tailwindcss-typography/pull/317))
+- Add description list (`<dl>`, `<dt>`, `<dd>`) styles ([#316](https://github.com/tailwindlabs/tailwindcss-typography/pull/316))
 
 ## [0.5.9] - 2023-01-10
 

demo/components/MarkdownSample.mdx

@@ -161,6 +161,29 @@ The most annoying thing about lists in Markdown is that `<li>` elements aren't g
 
 And finally a sentence to close off this section.
 
+## We didn't forget about description lists
+
+Well, that's not exactly true, we first released this plugin back in 2020 and it took three years before we added description lists. But they're here now, so let's just be happy about that&hellip;okay? They can be great for things like FAQs.
+
+<dl>
+  <dt>Why do you never see elephants hiding in trees?</dt>
+  <dd>
+    Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas
+    cupiditate laboriosam fugiat.
+  </dd>
+  <dt>What do you call someone with no body and no nose?</dt>
+  <dd>
+    Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, voluptas ipsa quia
+    excepturi, quibusdam natus exercitationem sapiente tempore labore voluptatem.
+  </dd>
+  <dt>Why can't you hear a pterodactyl go to the bathroom?</dt>
+  <dd>
+    Because the pee is silent. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, quas
+    voluptatibus ex culpa ipsum, aspernatur blanditiis fugiat ullam magnam suscipit deserunt illum
+    natus facilis atque vero consequatur! Quisquam, debitis error.
+  </dd>
+</dl>
+
 ## There are other elements we need to style
 
 I almost forgot to mention links, like [this link to the Tailwind CSS website](https://tailwindcss.com). We almost made them blue but that's so yesterday, so we went with dark gray, feels edgier.

src/styles.js

@@ -144,6 +144,17 @@ let defaultModifiers = {
           marginTop: em(8, 14),
           marginBottom: em(8, 14),
         },
+        dl: {
+          marginTop: em(16, 14),
+          marginBottom: em(16, 14),
+        },
+        dt: {
+          marginTop: em(16, 14),
+        },
+        dd: {
+          marginTop: em(4, 14),
+          paddingLeft: em(22, 14),
+        },
         hr: {
           marginTop: em(40, 14),
           marginBottom: em(40, 14),
@@ -338,6 +349,17 @@ let defaultModifiers = {
           marginTop: em(12, 16),
           marginBottom: em(12, 16),
         },
+        dl: {
+          marginTop: em(20, 16),
+          marginBottom: em(20, 16),
+        },
+        dt: {
+          marginTop: em(20, 16),
+        },
+        dd: {
+          marginTop: em(8, 16),
+          paddingLeft: em(26, 16),
+        },
         hr: {
           marginTop: em(48, 16),
           marginBottom: em(48, 16),
@@ -532,6 +554,17 @@ let defaultModifiers = {
           marginTop: em(16, 18),
           marginBottom: em(16, 18),
         },
+        dl: {
+          marginTop: em(24, 18),
+          marginBottom: em(24, 18),
+        },
+        dt: {
+          marginTop: em(24, 18),
+        },
+        dd: {
+          marginTop: em(12, 18),
+          paddingLeft: em(28, 18),
+        },
         hr: {
           marginTop: em(56, 18),
           marginBottom: em(56, 18),
@@ -726,6 +759,17 @@ let defaultModifiers = {
           marginTop: em(16, 20),
           marginBottom: em(16, 20),
         },
+        dl: {
+          marginTop: em(24, 20),
+          marginBottom: em(24, 20),
+        },
+        dt: {
+          marginTop: em(24, 20),
+        },
+        dd: {
+          marginTop: em(12, 20),
+          paddingLeft: em(32, 20),
+        },
         hr: {
           marginTop: em(56, 20),
           marginBottom: em(56, 20),
@@ -920,6 +964,17 @@ let defaultModifiers = {
           marginTop: em(16, 24),
           marginBottom: em(16, 24),
         },
+        dl: {
+          marginTop: em(32, 24),
+          marginBottom: em(32, 24),
+        },
+        dt: {
+          marginTop: em(32, 24),
+        },
+        dd: {
+          marginTop: em(12, 24),
+          paddingLeft: em(38, 24),
+        },
         hr: {
           marginTop: em(72, 24),
           marginBottom: em(72, 24),
@@ -1409,6 +1464,10 @@ module.exports = {
         'ul > li::marker': {
           color: 'var(--tw-prose-bullets)',
         },
+        dt: {
+          color: 'var(--tw-prose-headings)',
+          fontWeight: '600',
+        },
         hr: {
           borderColor: 'var(--tw-prose-hr)',
           borderTopWidth: 1,