How to target elements with a specific data attribute with Tailwind CSS?

Question

I have several message boxes and each box has a data-author attribute.

If I want to apply styles to these message boxes in CSS, I can just do:

[data-author="Ben"] {
  background-color: blue;
}

But I'm not sure how to do this with Tailwind CSS or whether it's even possible. Any idea?

Thanks

Answer 1

As of Tailwind v3.2, data attribute variants are supported.

<!-- Will apply -->
<div data-size="large" class="data-[size=large]:p-8">
  <!-- ... -->
</div>

<!-- Will not apply -->
<div data-size="medium" class="data-[size=large]:p-8">
  <!-- ... -->
</div>

See here: https://tailwindcss.com/blog/tailwindcss-v3-2#data-attribute-variants