[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 👍

[swanson]

Ran into this today, added this to my application as a work-around:

/* Fix Safari issue related to <summary> / <details> arrow */
details > summary.list-none::-webkit-details-marker,
details > summary.list-none::marker {
  display: none;
}

There seems to be some Safari versions using ::-webkit-details-marker and some using ::marker now.

[CaptainYarb]

It's a shame this ticket is closed as it would be highly valuable to a more semantic web to have control over this within tailwind. The workaround is reasonable, but with Tailwind 2's JIT it would seem like a reasonable feature to have added with relatively no cost.

[lloydjatkinson]

Wanted to add this would be a great addition to Tailwind 3.x - it would be great for the Typography plugin as well, imagine being able to put a collapsible panel for extra information using only <details> and <summary>. No JS required, perfect for lightweight blog posts. Like this:

Read more here...

Please add support for styling this to Tailwind (for example the ugly triangle symbol)

[TsarPrince]

So, tailwind 3.0 is out there, and this feature is still not added -_- Please consider adding it further releases, I just love tailwind and this little touch will make it even more robust.

[colmanhumphrey]

Just in case it helps anyone, as I was slightly struggling earlier: you can customise the symbol, and in fact every part, once you've sorted out removing the marker from webkit (elsewhere, just adding list-none to the summary will do it). So assuming you've got one of the above webkit options in your CSS somewhere, e.g.:

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

You can then use group with group-open for full control:

<details className="group open:ring">
  <summary
    className="text-blue-500 group-open:text-green-500 list-none"
  >
    <span className="group-open:hidden mr-4">
      Show Closed
    </span>
    <span className="hidden group-open:inline mr-4">
      Show Open
    </span>
    I'm the summary
  </summary>
  <p>
    Whatever else
  </p>
</details>

(use an icon in place of Show Closed and Show Open etc)

[raview69]

Just in case it helps anyone, as I was slightly struggling earlier: you can customise the symbol, and in fact every part, once you've sorted out removing the marker from webkit (elsewhere, just adding list-none to the summary will do it). So assuming you've got one of the above webkit options in your CSS somewhere, e.g.:

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

You can then use group with group-open for full control:

<details className="group open:ring">
  <summary
    className="text-blue-500 group-open:text-green-500 list-none"
  >
    <span className="group-open:hidden mr-4">
      Show Closed
    </span>
    <span className="hidden group-open:inline mr-4">
      Show Open
    </span>
    I'm the summary
  </summary>
  <p>
    Whatever else
  </p>
</details>

(use an icon in place of Show Closed and Show Open etc)

thank you that is help me so much

[qwatts-dev]

I just encountered this issue, and I was able to solve using Tailwind's Arbitrary Variants.

Using arbitrary variants

Just like arbitrary values let you use custom values with your utility classes, arbitrary variants let you write custom selector modifiers directly in your HTML.

Arbitrary variants are just format strings that represent the selector, wrapped in square brackets. For example, this arbitrary modifier selects an element only when it is the third child:

<ul role="list">
  {#each items as item}
    <li class="[&:nth-child(3)]:underline">{item}</li>
  {/each}
</ul>

Solution

So, in this example, you don't have to add non Tailwind css. You simply add the Arbitrary Variate [&::-webkit-details-marker]:hidden to the <summary> tag.

So this html:

<details className="group open:ring">
  <summary
    className="text-blue-500 group-open:text-green-500 list-none"
  >
  ...

Becomes this:

<details className="group open:ring">
  <summary
    className="text-blue-500 group-open:text-green-500 list-none [&::-webkit-details-marker]:hidden"
  >
  ...

[lloydjatkinson]

I think you could add [&::-webkit-details-marker]:hidden as a custom utility class in tailwind.config.js, right?