Support for dl, dt and dd tags

[apoorvmote]

I not only use dl, dt and dd tags but I nest them inside of each other. E.g. dd has another dl inside of it.

I have to add tailwind classes manually to make dt semi bold and add left padding to dd.

Also I am terrible designer so I would like some great designer to take a look once over.

[Svish]

I tend to get data using definition lists too, and would be awesome if this typography plugin could give those some great looking styles as well. Because I suck at this 😕

[adamwathan]

Hey! Can you provide an example of how this might look in the type of content this plugin is meant to style? Not opposed to working on this at some point but don't have a clear picture in my mind of the exact scenario. Thanks!

[Svish]

Currently working on a bible study website where <dl> is sometimes used within studies for lists of concepts/terms with descriptions/explanations. Below are links to three cases of that, and a screenshot of one of them. Working on rewriting this website with Next.js and Tailwind, but that version is not live yet. Note that the lists are all within their lesson/study, part of the text content that will be styled by the prose plugin, not something separate that comes after the text. Also note that the colon (:) after the concept/term is not part of the definition list "styling", it's just part of the text content in these cases.

• https://bibelstudiet.no/2019/3/12#2
• https://bibelstudiet.no/2019/3/10#5
• https://bibelstudiet.no/2021/1/8#4

More general usage of the <dl> tag, perhaps more common, is glossaries of terms or keywords.

Definition lists can have both multiple terms and multiple definitions for each "block". So you can have two or more terms followed by one definition, one term followed by two or more definitions, and multiple of both as well. Regarding styling it should probably also be taken into account that a definition could have multiple paragraphs as well.

I tend to style definition lists like shown in the screenshot, as tiny headers (same typography as other text, just bolder), with the definitions indented. In my local Tailwind version, I've played around with using a dot in front of the definitions, basically same as this plugin uses for unordered lists, but not sure if I like it or not. 🤷‍♂️ Leaning towards maybe not, but not sure. Don't really know what I'm doing when it comes to typography, hence why I wish this was part of the prose plugin so I didn't have to think about it 😛

Hope this helps. 🙃

[jlcara]

@adamwathan this could be also applied to a FAQ section.

I think that be the best approach could be by applying a way to "clone" an element style via tailwind.config.js. By the way, is that already possible?

In my case, I'd like dt tag to have the same styles as h3 tag.

[sebastienbarre]

The plugin demo actually has a section that could be a good target for definition lists:

I'm saying that mostly because I'm coming from Markdown, where there is no easy way to reproduce what is shown here, but Markdown does support definition list that could be rendered like the above ultimately.

Term with *inline markup*

: Definition **1**

[caendesilva]

I'm always so surprised this is still not a thing. I personally don't actually know how Tailwind works under the hood, but I feel like it should be pretty simple to add some simple styling?

Here's my suggestion for a basic style made to match browser defaults

This is literally just two styles. font-bold for <dt> elements and ml-4 for <dd>. It makes a world of difference in my opinion.

[ChildishhAlbino]

I like @caendesilva's suggestion - this would be a really useful feature to have included.

[reinink]

Hey! Thanks for this suggestion — I've just added styles for description lists in #316. We're hoping to get a new release out really soon, but until then you can use our insiders release:

npm install @tailwindcss/typography@insiders