Tailwindcss: [Feature/Question] Does Tailwind support the html tag <details> ?

[tance77]

I just recently learned about the HTML element details

I was hoping to style this list with tailwindcss, but I couldn't find any documentation when I typed details into tailwindcss search bar.

Does tailwind support the <details> tag and if it does exist would you be so kind and link me to the documentation on tailwindcss. If it doesn't could we see the <details> tag have styles like lists for future iterations of tailwind?

Example

<details>
<summary>Users</summary>
<div>
    <p>Jessica</p>
    <p>Fred</p>
    <p>Mary</p>
    <p>Doug</p>
</div>
</details>

Users

Jessica

Fred

Mary

Doug

[tlgreg]

Tailwind inherits normalize's styling (display) of <details> and <summary> so details is a block and summary is list-item

[tance77]

Correct but I guess my question was more of do we have something that I can use for removing the arrow.

list-none does not seem to do the job.

The css to do that in chrome is

details > summary::-webkit-details-marker {
  display: none;
}

[tlgreg]

list-none on the <summary> works in Firefox. Unfortunately, webkit/chrome uses the pseudo-element instead.

Should this be added to list-none utility? Or maybe reset by default, like other lists?

.list-none {
  list-style-type: none;
}
.list-none::-webkit-details-marker {
  display: none;
}

[adamwathan]

Not planning to change anything around this any time soon as it would be a breaking change. If you want to reset this we have instructions for adding your own base styles in the docs 👍