diff --git a/CHANGELOG.md b/CHANGELOG.md index e6fcbca..e58dc3e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `` 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 `` styles ([#317](https://github.com/tailwindlabs/tailwindcss-typography/pull/317)) +- Add description list (`
`, `
`, `
`) styles ([#316](https://github.com/tailwindlabs/tailwindcss-typography/pull/316)) ## [0.5.9] - 2023-01-10 diff --git a/demo/components/MarkdownSample.mdx b/demo/components/MarkdownSample.mdx index 13c2d56..1350ea7 100644 --- a/demo/components/MarkdownSample.mdx +++ b/demo/components/MarkdownSample.mdx @@ -161,6 +161,29 @@ The most annoying thing about lists in Markdown is that `
  • ` 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…okay? They can be great for things like FAQs. + +
    +
    Why do you never see elephants hiding in trees?
    +
    + Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas + cupiditate laboriosam fugiat. +
    +
    What do you call someone with no body and no nose?
    +
    + Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, voluptas ipsa quia + excepturi, quibusdam natus exercitationem sapiente tempore labore voluptatem. +
    +
    Why can't you hear a pterodactyl go to the bathroom?
    +
    + 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. +
    +
    + ## 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. diff --git a/src/styles.js b/src/styles.js index f203ec4..faa1af8 100644 --- a/src/styles.js +++ b/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,