Tailwind’s open modifier prefix

The <details> element takes an open attribute to determine if it's currently open or not.

You can use Tailwind's open: modifier prefix to apply styles only when the <details> element is... open.

Discuss on Twitter

Transcript

Ok, so here we have a list of frequently asked questions, and as you can see, each question can be toggled, opened or closed. These FAQs are implemented with the details tag, meaning that it will only show the summary when it's closed, and when it's open, it will show the rest.

Let's say that we wanted to apply different styles to a question when it's open, to attract more attention to it. So let me show you something. I'll apply a background of white, as well as a shadow XL on the first details element. And so now it clearly stands out, but we want these styles to be applied only when the question is open, and not when it's closed like this.

And turns out the details element has an open attribute to it when it's open. To demonstrate that, I'll go in the second details and add open. And you can see now the second question is displayed as open. And we can target this open attribute with the new open variant in Tailwind CSS version 3.

So here I'll prefix the BGWhite class with the open variant, and do the same for the shadow open column.

And just like that, these utilities will only be applied when the details element is open.

More Tips