Target Elements with Specific Data Attributes in Tailwind CSS

Tailwind CSS allows developers to style elements based on data- attributes efficiently. Since Tailwind v3.2, it has built-in support for data- attribute variants, making styling with data attributes more flexible.

Solution 1: Using Data Attribute Variants (Tailwind v3.2+)

Tailwind provides direct support for targeting elements with specific data attributes.

<!-- Will apply -->
<div data-author="Ben" class="data-[author=Ben]:bg-blue-500">Message from Ben</div>

<!-- Will not apply -->
<div data-author="Alice" class="data-[author=Ben]:bg-blue-500">Message from Alice</div>

Solution 2: Using Arbitrary Variants for More Flexibility

You can use arbitrary variants to apply styles based on any attribute, not just data- attributes.

<div class="[&[data-author='Ben']]:bg-blue-500" data-author="Ben">Message from Ben</div>

This method allows you to use advanced CSS selectors within Tailwind.

Solution 3: Custom Tailwind Plugin for Data Attributes

If you need more control, you can create a custom Tailwind plugin to define variants for specific attributes.

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(({ addVariant }) => {
      addVariant('author-ben', '&[data-author="Ben"]')
    }),
  ],
}

Now you can use:

<div class="author-ben:bg-blue-500" data-author="Ben">Message from Ben</div>

Alternative: Styling Data Attributes Using @apply

You can also define styles in your CSS using Tailwind’s @apply directive.

[data-author='Ben'] {
  @apply bg-blue-500;
}

This method works if you prefer a CSS-first approach.

FAQs

1. Can I target data attributes without specifying a value?

Yes, use an empty selector:

<div class="[&[data-active]]:bg-green-500" data-active>Active Element</div>

2. Can I use `group-hover` with data attributes?

Yes, Tailwind supports group-data:

<div class="group" data-state="open">
  <div class="group-data-[state=open]:text-red-500">Open State Text</div>
</div>

3. What if I need to target multiple attributes?

You can combine selectors:

<div
  class="[&[data-status='active'][data-role='admin']]:text-green-500"
  data-status="active"
  data-role="admin"
>
  Admin Active
</div>