How to Use Multi data-* Attribute Selectors in Tailwind CSS?

[selllami]

Hi,

I'm trying to apply styles conditionally based on multiple data-* attributes in Tailwind, but I haven't found a way to do it directly. I was wondering if there's a built-in solution or a recommended approach.

My Use Case:

What I tried (but doesn’t work):

<div 
  data-sidebar-state="open" 
  data-device="mobile"
  className="group ...."
>
  <div className="group-data-[sidebar-state=open][device=mobile]:cssClasse ....">
    Sidebar Content
  </div>
</div>

Is there a native way in Tailwind to apply styles only when multiple data-* attributes match? Or is the best solution to use custom CSS?

Thanks in advance for any guidance! 🙌

[wongjn]

You can do:

<div className="group-data-[sidebar-state=open]:group-data-[device=mobile]:className">

[selllami]

Thank you for ur response!

I appreciate the suggestion, it works as well:

<div className="group-data-[sidebar-state=open]:group-data-[device=mobile]:className">

However, I had already arrived at a similar solution based on breakpoint prefixes, which works well for my use case:

<div className="group-data-[sidebar-state=open]:sm:className ...">

Thanks again for your help 🙏